/* =============================================================
   BALÃO PLAY — folha única da marca · balaoplay.com.br · v6 · 04/08/2026

   REFERÊNCIA REAL DA PELE (nomeada antes da cor):
   a página de GRADE DE PROGRAMAÇÃO impressa: papel creme quente com grão
   visível, tinta quente quase preta, filete de 1px separando linha de linha,
   hora tabular à esquerda, e o vermelho de emissora entrando só onde a
   emissora fala. Dessa referência vêm cinco decisões e nenhuma mais:
     1. a superfície é CLARA do topo ao rodapé. Nenhum bloco escuro na página;
     2. o ritmo é denso e tabular: a página empilha linhas, não respiros;
     3. o grão do papel é visível sobre o creme, não é enfeite;
     4. o canto é reto (0px): nada de bolha, nada de adesivo, nada de card
        flutuando com sombra;
     5. o carmim é voz de emissora: aparece em dose curta e sempre chapado.

   Território: a TV de todo dia (canal ao vivo e grade do dia).
   Produto: assinatura de IPTV por R$ 24,90/mês.

   Cor em OKLCH. Nenhum neutro puro: o claro puxa o matiz 80-85 (creme quente)
   e o escuro puxa o matiz 60 (tinta quente). Nunca #000, nunca #fff.
   Zero marrom de barro, zero laranja queimado, zero azul de TV.
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root {
  /* superfície de papel quente: é o fundo dominante da marca */
  --papel:    oklch(95% 0.020 85);    /* #F5EEE0 creme quente, croma visível */
  --areia:    oklch(90% 0.028 80);    /* #E8DCCA 2ª superfície */
  --areia-2:  oklch(85.5% 0.032 78);  /* #DBCDB9 3ª superfície, rodapé */

  /* tinta quente: é TEXTO, e o mais escuro que a página tem */
  --tinta:    oklch(20% 0.020 60);    /* #1D140D */
  --tinta-2:  oklch(37% 0.024 62);    /* #493D33 */
  --tinta-3:  oklch(45% 0.026 64);    /* #61533F */

  /* carmim de emissora: o acento, sempre chapado */
  --carmim:   oklch(55% 0.200 22);    /* #CC2538 */
  --carmim-f: oklch(44% 0.170 22);    /* #9B0D23 texto miúdo e hover */

  /* filetes tingidos de tinta, nunca cinza neutro */
  --fio:         color-mix(in oklab, var(--tinta) 15%, transparent);
  --fio-forte:   color-mix(in oklab, var(--tinta) 32%, transparent);
  --fio-carmim:  color-mix(in oklab, var(--carmim) 45%, transparent);

  /* tipografia */
  --display: 'Anton', 'Arial Narrow', 'Helvetica Neue Condensed', sans-serif;
  --texto:   'Asap', 'Segoe UI', system-ui, sans-serif;

  --h1:   clamp(3rem, 6.5vw, 6rem);
  --t--2: clamp(0.72rem, 0.70rem + 0.10vw, 0.79rem);
  --t--1: clamp(0.84rem, 0.81rem + 0.14vw, 0.93rem);
  --t-0:  clamp(1.02rem, 0.98rem + 0.20vw, 1.15rem);
  --t-1:  clamp(1.18rem, 1.10rem + 0.38vw, 1.44rem);
  --t-2:  clamp(1.42rem, 1.26rem + 0.72vw, 1.92rem);
  --t-3:  clamp(1.78rem, 1.44rem + 1.55vw, 2.90rem);
  --t-4:  clamp(2.20rem, 1.62rem + 2.60vw, 4.00rem);
  --t-5:  clamp(2.70rem, 1.75rem + 4.20vw, 5.20rem);

  /* espaço denso: a página empilha linha em cima de linha */
  --gap:      clamp(0.9rem, 0.55rem + 1.5vw, 1.5rem);
  --bloco-g:  clamp(3.8rem, 2.4rem + 5.4vw, 7.0rem);
  --bloco-m:  clamp(2.6rem, 1.8rem + 3.0vw, 4.2rem);
  --bloco-p:  clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem);
  --bloco-s:  clamp(2.1rem, 1.4rem + 2.4vw, 3.3rem);
  --raio:     0px;
  --largura:  1240px;
  --sangria:  calc((100vw - min(100vw - 5rem, 1240px)) / 2);
  --saida:    cubic-bezier(0.16, 1, 0.3, 1);

  /* sombra em 2 camadas tingidas no matiz do papel, nunca preta pura */
  --sombra:   0 1px 0 color-mix(in oklab, var(--tinta) 14%, transparent),
              0 22px 40px -28px color-mix(in oklab, var(--tinta) 42%, transparent);
  --sombra-p: 0 1px 0 color-mix(in oklab, var(--tinta) 10%, transparent),
              0 10px 22px -16px color-mix(in oklab, var(--tinta) 22%, transparent);
  --sombra-hover: 0 1px 0 color-mix(in oklab, var(--tinta) 18%, transparent),
                  0 18px 32px -22px color-mix(in oklab, var(--tinta) 32%, transparent);

  /* grão de papel, multiplicado por cima do creme */
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='170' height='170' filter='url(%23g)'/%3E%3C/svg%3E");
}

/* ---------- 2. BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--papel); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: var(--t-0);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
/* grão de papel: multiply sobre o creme, do jeito que tinta seca em fibra */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 9985;
  pointer-events: none;
  background-image: var(--grao);
  background-size: 170px 170px;
  opacity: 0.085;
  mix-blend-mode: multiply;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--carmim-f); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--tinta); }
/* manchete de jornal: caixa BAIXA no display. A caixa-alta fica reservada ao
   rotulo de eixo e ao logotipo, como em pagina de grade impressa. */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.012em;
  text-transform: none;
  margin: 0 0 0.42em;
  color: var(--tinta);
  text-wrap: balance;
}
h3, h4 { letter-spacing: 0; }
/* em caixa baixa o Anton carrega acento acima da altura de haste (o ê chega a
   1,11 de tinta): em título de 2 linhas a entrelinha 0,96 fazia as linhas se
   tocarem. H1/H2 sobem para 1,08; o display continua denso, sem colisão. */
h1, h2 { line-height: 1.08; }
p { margin: 0 0 1em; max-width: 66ch; text-wrap: pretty; }
strong, b { font-weight: 700; }
:focus-visible { outline: 2px solid var(--carmim); outline-offset: 3px; border-radius: 0; }
::selection { background: var(--carmim); color: var(--papel); }
/* âncoras sob o topo sticky: o título não perde o acento do Anton */
[id] { scroll-margin-top: 6.5rem; }

.bp-container { width: min(100% - 2rem, var(--largura)); margin-inline: auto; }
@media (min-width: 900px) { .bp-container { width: min(100% - 5rem, var(--largura)); } }

.bp-pular {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--tinta); color: var(--papel); padding: 12px 20px;
  font-weight: 700;
}
.bp-pular:focus { left: 0; }
.bp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ícone de linha fina, sempre pequeno e dentro do texto */
.bp-ic { width: 19px; height: 19px; flex: none; stroke-width: 1.5; }

/* rótulo de eixo: caixa-alta pequena, com o quadrado de emissora na frente */
.bp-olho {
  display: block;
  font-family: var(--texto);
  font-size: var(--t--2);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  margin-bottom: 18px;
}
.bp-olho::before {
  content: ""; display: inline-block;
  width: 9px; height: 9px; margin-right: 10px;
  background: var(--carmim);
}

/* ---------- 3. BOTÕES ---------- */
.bp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--texto); font-weight: 700;
  font-size: var(--t--1); letter-spacing: 0.07em; text-transform: uppercase;
  line-height: 1; text-decoration: none; cursor: pointer;
  padding: 17px 26px; border-radius: var(--raio);
  border: 1.5px solid transparent;
  transition: background-color .3s var(--saida), color .3s var(--saida),
              border-color .3s var(--saida), transform .3s var(--saida),
              box-shadow .3s var(--saida);
}
.bp-btn:active { transform: translateY(1px); }
.bp-btn--principal { background: var(--carmim); color: var(--papel); border-color: var(--carmim); }
.bp-btn--principal:hover {
  background: var(--carmim-f); border-color: var(--carmim-f); color: var(--papel);
  box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--carmim) 55%, transparent);
}
.bp-btn--vazio { background: transparent; color: var(--tinta); border-color: var(--fio-forte); }
.bp-btn--vazio:hover { background: var(--areia); color: var(--tinta); border-color: var(--tinta); }
.bp-btn--escuro { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.bp-btn--escuro:hover { background: var(--carmim); border-color: var(--carmim); color: var(--papel); }
.bp-btn--largo { width: 100%; }
.bp-btn--p { padding: 12px 18px; font-size: var(--t--2); }

/* ---------- 4. TOPO ---------- */
/* filete de emissora na primeira linha da página, como cabeça de jornal */
.bp-topo {
  background: color-mix(in oklab, var(--papel) 93%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-top: 4px solid var(--carmim);
  border-bottom: 2px solid var(--tinta);
  position: sticky; top: 0; z-index: 40;
}
.bp-topo-in {
  width: min(100% - 2rem, var(--largura)); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(12px, 2vw, 30px);
  min-height: 62px; padding: 8px 0;
}
@media (min-width: 900px) { .bp-topo-in { width: min(100% - 5rem, var(--largura)); } }
.bp-marca {
  display: inline-flex; align-items: center; gap: 11px;
  text-decoration: none; color: var(--tinta); margin-right: auto;
}
.bp-marca:hover { color: var(--tinta); }
.bp-marca img { width: 30px; height: 30px; }
.bp-marca span {
  font-family: var(--display); font-weight: 900; font-size: 1.22rem;
  letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
}
@media (max-width: 400px) { .bp-marca span { font-size: 1.05rem; } }
.bp-menu { display: none; gap: clamp(14px, 1.7vw, 28px); }
.bp-menu a {
  color: var(--tinta-2); text-decoration: none; font-weight: 600;
  font-size: 0.91rem; padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .25s var(--saida), border-color .25s var(--saida);
}
.bp-menu a:hover { color: var(--tinta); border-bottom-color: var(--carmim); }
@media (min-width: 1000px) { .bp-menu { display: flex; } }
.bp-topo-cta { display: flex; align-items: center; gap: 10px; }
.bp-topo-cta .bp-btn { white-space: nowrap; }
@media (max-width: 719.98px) { .bp-topo-cta .bp-btn--vazio { display: none; } }

/* ---------- 5. HERO ---------- */
.bp-hero {
  background: var(--papel);
  color: var(--tinta);
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--tinta);
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.8rem) 0 clamp(1.5rem, 1rem + 2vw, 2.4rem);
}
.bp-hero::before { display: none; }
.bp-hero > .bp-container { position: relative; z-index: 2; }
.bp-hero-grade { display: grid; gap: clamp(1.8rem, 3.4vw, 3.0rem); align-items: center; }
@media (min-width: 1020px) {
  .bp-hero-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 5.4fr); align-items: stretch; }
}
/* selo de emissora: bandeira chapada, não etiqueta discreta */
.bp-hero-selo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--carmim); color: var(--papel);
  padding: 9px 15px; margin: 0 0 22px;
}
.bp-ponto-vivo {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--papel);
  box-shadow: 0 0 0 0 color-mix(in oklab, var(--papel) 75%, transparent);
  animation: bp-pulso 2.8s var(--saida) infinite;
}
@keyframes bp-pulso {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklab, var(--papel) 70%, transparent); }
  70%, 100% { box-shadow: 0 0 0 11px transparent; }
}
.bp-hero h1 {
  font-size: var(--h1);
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 0.36em;
  color: var(--tinta);
  max-width: 17ch;
  text-wrap: balance;
}
.bp-hero h1 i { font-style: normal; color: var(--carmim); }
.bp-hero-lead {
  font-size: var(--t-1); line-height: 1.58; color: var(--tinta-2);
  max-width: 46ch; margin: 0 0 26px;
}
.bp-hero-lead strong { color: var(--tinta); font-weight: 700; }
.bp-hero-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.bp-hero-nota {
  font-size: var(--t--1); color: var(--tinta-3); margin: 0; line-height: 1.55;
  padding-top: 15px; border-top: 1px solid var(--fio-forte); max-width: 52ch;
}

/* foto documental: retângulo fechado com filete, do jeito que foto entra em
   página impressa. Não sangra: a sangria é da outra marca, não desta. */
.bp-hero-foto { position: relative; margin: 0; }
.bp-hero-foto img {
  width: 100%; border-radius: var(--raio);
  filter: saturate(1.04) contrast(1.06);
}
.bp-hero-faixa {
  position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tinta) 55%, transparent);
}
.bp-hero-faixa::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--grao);
  background-size: 170px 170px;
  opacity: 0.05;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.bp-hero-legenda {
  margin: 0; font-size: var(--t--2); color: var(--tinta-2);
  letter-spacing: 0.10em; text-transform: uppercase;
  background: var(--areia);
  border-top: 1px solid color-mix(in oklab, var(--tinta) 55%, transparent);
  padding: 9px 13px;
  display: flex; align-items: center; gap: 9px;
}
.bp-hero-legenda::before {
  content: ""; width: 8px; height: 8px; flex: none; background: var(--carmim);
}
@media (min-width: 1020px) {
  .bp-hero-foto {
    align-self: stretch;
    display: grid; grid-template-rows: minmax(0, 1fr) auto;
  }
  .bp-hero-foto img {
    height: 100%; width: 100%;
    min-height: clamp(380px, 34vw, 520px);
    object-fit: cover; object-position: 72% 50%;
  }
}

/* variante das páginas internas: respiro menor, superfície de areia */
.bp-hero--interno { padding-top: clamp(1.6rem, 1rem + 2.4vw, 2.6rem); background: var(--areia); }
.bp-hero--interno h1 { font-size: var(--t-4); max-width: 20ch; }
.bp-hero--interno .bp-hero-grade { align-items: center; padding-bottom: clamp(1.6rem, 3.2vw, 2.6rem); }
@media (min-width: 1020px) {
  .bp-hero--interno .bp-hero-grade { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5fr); }
  .bp-hero--interno .bp-hero-foto img { min-height: 0; }
}
.bp-hero--interno .bp-hero-legenda { background: var(--papel); }

/* trilha de navegação */
.bp-trilha { margin: 0 0 18px; }
.bp-trilha ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  font-size: var(--t--2); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tinta-3);
}
.bp-trilha li + li::before { content: "/"; margin-right: 10px; color: var(--fio-forte); }
.bp-trilha a { color: var(--tinta-3); text-decoration: none; }
.bp-trilha a:hover { color: var(--carmim-f); }
.bp-trilha--faixa {
  background: var(--areia); padding: 11px 0; margin: 0;
  border-bottom: 1px solid var(--fio-forte);
}

/* capa das páginas legais e de contato */
.bp-capa {
  background: var(--areia); padding: var(--bloco-p) 0 var(--bloco-m);
  border-bottom: 2px solid var(--tinta);
}
.bp-capa h1 { font-size: var(--t-3); max-width: 22ch; }
.bp-capa-lead { font-size: var(--t-1); color: var(--tinta-2); max-width: 60ch; margin: 0; }
.bp-capa-nota { font-size: var(--t--1); color: var(--tinta-3); margin: 18px 0 0; }
.bp-capa--largo h1 { max-width: 26ch; }
.bp-capa--sobria { background: var(--papel); }

/* ---------- 6. GRADE DE PROGRAMAÇÃO (o ritmo da marca) ---------- */
.bp-grade {
  background: var(--papel);
  border-top: 2px solid var(--tinta);
  border-bottom: 2px solid var(--tinta);
  padding: var(--bloco-p) 0;
}
.bp-grade-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 20px;
  padding-bottom: 12px; margin-bottom: 0; border-bottom: 2px solid var(--tinta);
}
.bp-grade-topo h2 {
  font-size: var(--t-1); margin: 0; letter-spacing: 0.02em; color: var(--tinta);
}
.bp-grade-topo p { margin: 0; font-size: var(--t--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3); }
.bp-grade-topo p:last-child { margin-left: auto; }
.bp-grade-linhas { display: grid; }
.bp-grade-linha {
  display: grid;
  grid-template-columns: 5.2rem minmax(0, 1fr) auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 14px;
  margin-inline: -14px;
  border-bottom: 1px solid var(--fio);
  transition: background-color .25s var(--saida);
}
/* zebra de guia impresso */
.bp-grade-linha:nth-child(even) { background: color-mix(in oklab, var(--areia) 60%, transparent); }
.bp-grade-linha:hover:not(.bp-grade-linha--agora) {
  background: color-mix(in oklab, var(--areia) 88%, transparent);
}
.bp-grade-canal { grid-column: 2; }
@media (min-width: 720px) {
  .bp-grade-linha { grid-template-columns: 6.2rem minmax(0, 1fr) 11rem 6rem; align-items: center; }
  .bp-grade-canal { grid-column: auto; }
  /* coluna de hora fechada por filete, como guia impresso */
  .bp-grade-hora { align-self: stretch; display: flex; align-items: center; border-right: 1px solid var(--fio); }
}
.bp-grade-hora {
  font-family: var(--display); font-weight: 900;
  font-size: 1.34rem; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums; color: var(--tinta);
}
.bp-grade-prog { font-weight: 600; color: var(--tinta); }
.bp-grade-prog span { display: block; font-weight: 400; font-size: var(--t--1); color: var(--tinta-3); }
.bp-grade-canal { font-size: var(--t--1); color: var(--tinta-2); letter-spacing: 0.06em; text-transform: uppercase; }
.bp-grade-status {
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta-3);
  display: inline-flex; align-items: center; gap: 7px;
}
.bp-grade-linha--agora {
  background: color-mix(in oklab, var(--carmim) 10%, transparent);
  box-shadow: inset 4px 0 0 var(--carmim);
}
.bp-grade-linha--agora:nth-child(even) { background: color-mix(in oklab, var(--carmim) 10%, transparent); }
.bp-grade-linha--agora .bp-grade-hora,
.bp-grade-linha--agora .bp-grade-status { color: var(--carmim-f); }
.bp-grade-pe { margin: 16px 0 0; font-size: var(--t--1); color: var(--tinta-3); max-width: 70ch; }

/* faixa compacta de horário (usada no hero das internas) */
.bp-horarios {
  display: flex; flex-wrap: wrap; margin: 22px 0 0;
  border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--fio-forte);
}
.bp-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 18px 11px 0; margin-right: 18px;
  font-size: var(--t--1); color: var(--tinta-2);
  border-right: 1px solid var(--fio);
}
.bp-chip:last-child { border-right: 0; margin-right: 0; }
.bp-chip .bp-ic { color: var(--carmim); }
.bp-chip b {
  font-family: var(--display); font-weight: 900; font-size: 1.16rem;
  color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}

/* ---------- 7. FAIXA ROLANTE (a bandeira de emissora) ---------- */
.bp-faixa {
  background: var(--carmim);
  color: var(--papel);
  border-block: 2px solid var(--tinta);
  padding: 13px 0; overflow: hidden;
}
.bp-faixa-trilho { display: flex; width: max-content; animation: bp-rola 58s linear infinite; }
.bp-faixa:hover .bp-faixa-trilho { animation-play-state: paused; }
.bp-faixa-item {
  display: inline-flex; align-items: center; gap: 10px;
  padding-inline: 24px; white-space: nowrap;
  font-size: var(--t--1); font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--papel);
}
.bp-faixa-item .bp-ic { color: var(--papel); }
.bp-faixa-item::after {
  content: ""; width: 5px; height: 5px; flex: none;
  background: var(--papel); margin-left: 24px;
}
@keyframes bp-rola { to { transform: translateX(-50%); } }

/* ---------- 8. SEÇÕES E RITMO ---------- */
/* ritmo desigual: bloco tabular respira curto; prosa e conversão pedem ar
   antes do título. O filete continua fechando cada faixa. */
.bp-secao {
  background: var(--papel);
  padding: var(--bloco-m) 0 calc(var(--bloco-m) * 0.92);
  border-bottom: 1px solid var(--fio-forte);
}
.bp-secao--papel {
  background: var(--areia);
  padding: var(--bloco-s) 0 var(--bloco-m);
}
.bp-secao--creme2 {
  background: var(--areia-2);
  padding: calc(var(--bloco-m) * 1.08) 0 var(--bloco-m);
}
.bp-secao-topo {
  max-width: 60ch;
  margin-bottom: clamp(1.75rem, 3.2vw, 2.75rem);
  padding-top: 0.12em;
}
.bp-secao-topo--meio { margin-inline: 0; }
.bp-secao-titulo {
  font-size: var(--t-3);
  margin: 0 0 0.42em;
  color: var(--tinta);
  text-wrap: balance;
}
.bp-secao-sub {
  font-size: var(--t-1); color: var(--tinta-2); margin: 0;
  max-width: 56ch; line-height: 1.55;
}

/* ---------- 9. BARRA DE 4 NÚMEROS (contador animado) ---------- */
.bp-numeros {
  background: var(--areia);
  padding: var(--bloco-p) 0 calc(var(--bloco-p) * 0.85);
  border-bottom: 1px solid var(--fio-forte);
}
.bp-numeros-grade {
  display: grid; gap: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
}
@media (min-width: 860px) { .bp-numeros-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bp-numero {
  display: block;
  padding: clamp(18px, 2.6vw, 26px) 22px clamp(16px, 2.2vw, 22px) 0;
  border-right: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio-forte);
}
@media (min-width: 860px) { .bp-numero { border-bottom: 0; } }
.bp-numero:nth-child(2n) { border-right: 0; }
@media (min-width: 860px) {
  .bp-numero:nth-child(2n) { border-right: 1px solid var(--fio-forte); }
  .bp-numero:last-child { border-right: 0; }
}
.bp-numero-valor {
  display: flex; align-items: baseline; gap: 1px;
  font-family: var(--display); font-weight: 900;
  font-size: clamp(2.4rem, 1.7rem + 2.6vw, 4rem); line-height: 0.92;
  letter-spacing: -0.03em; color: var(--tinta); font-variant-numeric: tabular-nums;
  margin-bottom: 14px;
}
.bp-numero-valor i {
  font-style: normal; font-size: 0.42em; color: var(--carmim);
  letter-spacing: 0; margin-left: 4px;
}
.bp-numero-valor em { font-style: normal; font-size: 0.52em; color: var(--carmim); margin-left: 2px; }
.bp-numero-valor em:first-child { margin-left: 0; margin-right: 5px; }
.bp-numero-valor b { font-weight: 900; color: var(--tinta); }
.bp-numero-rotulo {
  display: block; font-size: var(--t--1); color: var(--tinta-2);
  max-width: 20ch; line-height: 1.35;
}

/* ---------- 10. RESPOSTA DIRETA ---------- */
.bp-resposta {
  background: var(--papel);
  padding: calc(var(--bloco-m) * 1.12) 0 var(--bloco-m);
  border-bottom: 1px solid var(--fio-forte);
}
.bp-resposta-caixa {
  max-width: 72ch;
  border-left: 4px solid var(--carmim);
  padding-left: clamp(18px, 3vw, 40px);
}
@media (min-width: 960px) { .bp-resposta-caixa { margin-left: clamp(0px, 8vw, 140px); } }
.bp-resposta-rotulo {
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinta-3); margin: 0 0 18px;
}
.bp-resposta-caixa p { font-size: var(--t-1); line-height: 1.65; color: var(--tinta-2); }
.bp-resposta-caixa p strong { color: var(--tinta); font-weight: 700; }
.bp-resposta-caixa p:last-child { margin-bottom: 0; }

/* ---------- 11. PAREDE IRREGULAR DE DEPOIMENTOS ---------- */
.bp-depoimentos {
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: var(--gap); align-items: start;
}
.bp-dep {
  grid-column: span 12;
  border: 1px solid var(--fio-forte);
  border-radius: var(--raio);
  background: var(--papel);
  padding: clamp(1.1rem, 0.85rem + 1vw, 1.7rem);
}
.bp-dep--claro {
  background: var(--areia); color: var(--tinta); border-color: var(--tinta);
  box-shadow: var(--sombra-p);
}
.bp-dep--claro .bp-dep-texto { color: var(--tinta); }
.bp-dep--claro .bp-dep-quem span { color: var(--tinta-3); }
.bp-dep--claro .bp-dep-pe { border-top-color: var(--fio-forte); }
.bp-dep--claro .bp-inicial { background: var(--carmim); color: var(--papel); }
.bp-dep--claro .bp-conferido { color: var(--carmim-f); border-color: var(--fio-carmim); }
/* a irregularidade é de propósito: largura e altura variam linha a linha */
@media (min-width: 760px) {
  .bp-dep:nth-child(1) { grid-column: span 7; }
  .bp-dep:nth-child(2) { grid-column: span 5; }
  .bp-dep:nth-child(3) { grid-column: span 4; margin-top: -20px; }
  .bp-dep:nth-child(4) { grid-column: span 4; }
  .bp-dep:nth-child(5) { grid-column: span 4; margin-top: 24px; }
  .bp-dep:nth-child(6) { grid-column: span 5; margin-top: -12px; }
  .bp-dep:nth-child(7) { grid-column: span 7; }
}
.bp-dep-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bp-dep-corpo { display: block; }
.bp-dep-texto { margin: 0 0 18px; font-size: var(--t-0); line-height: 1.55; color: var(--tinta); }
.bp-dep--grande .bp-dep-texto { font-size: var(--t-1); line-height: 1.5; }
.bp-dep-pe {
  display: flex; align-items: center; gap: 12px;
  border-top: 1px solid var(--fio-forte); padding-top: 14px;
}
.bp-inicial {
  width: 38px; height: 38px; flex: none; border-radius: var(--raio);
  background: var(--carmim); color: var(--papel);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 900; font-size: 1.05rem;
}
.bp-inicial svg { width: 17px; height: 17px; }
.bp-conferido .bp-ic { width: 12px; height: 12px; }
.bp-dep-quem { font-size: var(--t--1); line-height: 1.32; color: var(--tinta); }
.bp-dep-quem b { display: block; font-weight: 700; }
.bp-dep-quem span { color: var(--tinta-3); }
.bp-conferido {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--carmim-f); border: 1px solid var(--fio-carmim);
  border-radius: var(--raio); padding: 4px 9px; white-space: nowrap;
}
.bp-estrelas { display: inline-flex; align-items: center; gap: 9px; margin: 0; }
.bp-estrelas svg { width: 92px; height: 17px; color: var(--carmim); }
.bp-dep--claro .bp-estrelas svg { color: var(--carmim); }
.bp-estrelas span { font-size: var(--t--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta-3); }
.bp-dep--claro .bp-estrelas span { color: var(--tinta-3); }

/* frase de abertura da parede, com os números correndo dentro dela */
.bp-parede-frase {
  font-family: var(--display); font-weight: 900; text-transform: none;
  font-size: var(--t-2); line-height: 1.04; letter-spacing: -0.012em;
  color: var(--tinta); max-width: 24ch; margin: 0 0 10px;
}
.bp-parede-frase em { font-style: normal; color: var(--carmim); font-variant-numeric: tabular-nums; }

/* ---------- 12. PLANOS ---------- */
.bp-planos {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
}
.bp-plano {
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
  background: var(--papel);
  padding: 26px 20px 22px; display: flex; flex-direction: column; position: relative;
  transition: border-color .3s var(--saida), box-shadow .3s var(--saida), transform .3s var(--saida);
}
.bp-secao--papel .bp-plano, .bp-secao--creme2 .bp-plano { background: var(--papel); }
.bp-plano:hover {
  border-color: color-mix(in oklab, var(--tinta) 42%, transparent);
  box-shadow: var(--sombra-p);
}
/* o destaque não é um bloco escuro: é moldura de emissora */
.bp-plano--destaque {
  background: var(--papel); color: var(--tinta);
  border: 2px solid var(--carmim); box-shadow: var(--sombra);
  padding-top: 60px;
}
.bp-plano--destaque:hover {
  border-color: var(--carmim);
  box-shadow: var(--sombra-hover);
}
@media (min-width: 1080px) { .bp-plano--destaque { margin-block: -18px; padding-block: 66px 26px; } }
.bp-plano-fita {
  position: absolute; top: 0; left: 0; right: 0;
  background: var(--carmim); color: var(--papel);
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  line-height: 1.28; text-align: center;
  padding: 8px 12px; margin: 0;
}
.bp-plano--destaque .bp-plano-fita { top: -2px; left: -2px; right: -2px; }
.bp-plano-nome { font-size: var(--t-2); margin: 0 0 2px; color: var(--tinta); line-height: 1.05; }
.bp-plano--destaque .bp-plano-nome { color: var(--tinta); }
.bp-plano-quem { font-size: var(--t--1); color: var(--tinta-3); margin: 0 0 18px; line-height: 1.4; }
.bp-plano--destaque .bp-plano-quem { color: var(--tinta-3); }
.bp-plano-preco {
  font-family: var(--display); font-weight: 900; line-height: 0.92;
  margin: 4px 0 10px; color: var(--tinta); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
}
.bp-plano--destaque .bp-plano-preco { color: var(--tinta); }
.bp-plano-moeda { font-size: 1.05rem; align-self: flex-start; margin-top: 0.35em; color: var(--carmim); }
.bp-plano-valor { font-size: clamp(2.6rem, 2rem + 2.2vw, 3.5rem); letter-spacing: -0.03em; }
.bp-plano-cent { font-size: 1.35rem; }
.bp-plano-ciclo { font-size: var(--t--1); color: var(--tinta-3); margin: 0 0 2px; }
.bp-plano-mes { font-size: var(--t--1); font-weight: 700; color: var(--carmim-f); margin: 0 0 18px; }
.bp-plano--destaque .bp-plano-ciclo { color: var(--tinta-3); }
.bp-plano--destaque .bp-plano-mes { color: var(--carmim-f); }
.bp-plano-itens { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 9px; }
.bp-plano-itens li {
  font-size: var(--t--1); line-height: 1.42; padding-left: 16px; position: relative;
  color: var(--tinta-2);
}
.bp-plano-itens li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 2px; background: var(--carmim);
}
.bp-plano--destaque .bp-plano-itens li { color: var(--tinta-2); }
.bp-plano--destaque .bp-plano-itens li::before { background: var(--carmim); }
.bp-item-bonus { color: var(--tinta) !important; font-weight: 700; }
.bp-plano--destaque .bp-item-bonus { color: var(--tinta) !important; }
.bp-plano .bp-btn { margin-top: auto; }
.bp-plano-pe { font-size: var(--t--2); color: var(--tinta-3); text-align: center; margin: 12px 0 0; }
.bp-plano--destaque .bp-plano-pe { color: var(--tinta-3); }
/* no cartão de destaque o CTA é o mais alto da página */
.bp-plano--destaque .bp-btn--escuro { background: var(--carmim); border-color: var(--carmim); }
.bp-plano--destaque .bp-btn--escuro:hover {
  background: var(--carmim-f); border-color: var(--carmim-f);
  box-shadow: 0 10px 24px -14px color-mix(in oklab, var(--carmim) 55%, transparent);
}
.bp-plano--destaque .bp-btn--vazio { color: var(--tinta); border-color: var(--fio-forte); }
.bp-plano--destaque .bp-btn--vazio:hover { background: var(--areia); color: var(--tinta); border-color: var(--tinta); }

/* faixa de confiança colada ao preço */
.bp-confianca {
  margin-top: clamp(1.5rem, 2.6vw, 2.2rem);
  display: grid; gap: 0;
  border-top: 2px solid var(--tinta);
}
.bp-confianca-item {
  display: flex; gap: 14px; align-items: flex-start; margin: 0;
  padding: 15px 0; border-bottom: 1px solid var(--fio);
  font-size: var(--t--1); color: var(--tinta-2); max-width: none;
}
.bp-confianca-item b { color: var(--tinta); font-weight: 700; }
.bp-confianca-icone { color: var(--carmim); flex: none; display: block; margin-top: 2px; }
@media (min-width: 900px) { .bp-confianca { grid-template-columns: repeat(3, 1fr); gap: 0 34px; } }
.bp-garantia {
  margin: 20px 0 0; font-size: var(--t--1); color: var(--tinta-3); max-width: 76ch;
}

/* ---------- 13. RECURSOS ---------- */
.bp-recursos {
  display: grid; gap: 0;
  border-top: 2px solid var(--tinta);
}
@media (min-width: 720px) { .bp-recursos { grid-template-columns: repeat(2, 1fr); column-gap: clamp(24px, 4vw, 64px); } }
@media (min-width: 1060px) { .bp-recursos { grid-template-columns: repeat(3, 1fr); } }
.bp-recurso { padding: 26px 0; border-bottom: 1px solid var(--fio-forte); }
.bp-recurso h3 { font-size: var(--t-1); margin: 0 0 0.45em; color: var(--tinta); display: flex; align-items: center; gap: 10px; line-height: 1.12; }
.bp-recurso h3 .bp-ic { color: var(--carmim); }
.bp-recurso p { margin: 0; color: var(--tinta-2); font-size: var(--t--1); line-height: 1.6; }
.bp-recurso-icone { color: var(--carmim); margin-bottom: 14px; display: block; }
.bp-mais {
  display: inline-block; margin-top: 14px; font-size: var(--t--1);
  font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--carmim-f); text-decoration: none;
  border-bottom: 2px solid var(--fio-carmim); padding-bottom: 3px;
  transition: color .25s var(--saida), border-color .25s var(--saida);
}
.bp-mais:hover { color: var(--tinta); border-bottom-color: var(--tinta); }

/* ---------- 14. APARELHOS ---------- */
.bp-aparelhos { display: flex; flex-wrap: wrap; border-top: 2px solid var(--tinta); }
.bp-aparelho {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 13px;
  padding: 16px 26px 16px 0; margin-right: 26px;
  border-bottom: 1px solid var(--fio-forte);
  flex: 1 1 250px;
}
.bp-aparelho-icone { grid-row: span 2; color: var(--carmim); }
.bp-aparelho b { font-weight: 700; font-size: var(--t-0); color: var(--tinta); align-self: end; }
.bp-aparelho > span:not(.bp-aparelho-icone) { font-size: var(--t--1); color: var(--tinta-3); align-self: start; line-height: 1.3; }

/* ---------- 15. TABELAS ---------- */
.bp-compara-rolo, .bp-tabela-rolo {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--tinta);
  margin-top: clamp(1.2rem, 2.4vw, 1.9rem);
}
.bp-compara, .bp-tabela {
  border-collapse: collapse; width: 100%; min-width: 620px;
  font-size: var(--t--1); font-variant-numeric: tabular-nums;
}
.bp-compara caption, .bp-tabela caption {
  text-align: left; padding: 0 0 14px; font-size: var(--t--2);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-3);
  caption-side: top;
}
.bp-compara th, .bp-compara td, .bp-tabela th, .bp-tabela td {
  padding: 14px 18px 14px 0; text-align: left;
  border-bottom: 1px solid var(--fio); vertical-align: top;
  line-height: 1.45;
}
.bp-compara tbody tr:nth-child(even), .bp-tabela tbody tr:nth-child(even) {
  background: color-mix(in oklab, var(--areia) 55%, transparent);
}
.bp-compara thead th, .bp-tabela thead th {
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--tinta-2);
  border-bottom: 2px solid var(--tinta);
}
.bp-compara tbody th, .bp-tabela tbody th { font-weight: 700; color: var(--tinta); }
/* a cor pertence à coluna da casa: carmim e check na 2ª coluna, concorrência
   em tinta neutra. O :not() poupa as tabelas de grade, onde a 2ª coluna é programa. */
.bp-compara:not(.bp-compara--grade) td:nth-child(2) { color: var(--carmim-f); font-weight: 700; }
.bp-sim { color: var(--tinta-2); font-weight: 600; }
.bp-nao { color: var(--tinta-3); }
.bp-mar-t {
  width: 13px; height: 13px; flex: none;
  display: inline-block; vertical-align: -1px; margin-right: 7px;
  color: currentColor;
}
.bp-compara:not(.bp-compara--grade) td:nth-child(2) .bp-mar-t { color: var(--carmim); }
.bp-compara--grade td:first-child, .bp-compara--grade th:first-child { white-space: nowrap; }
.bp-hora {
  font-family: var(--display); font-weight: 900; font-size: 1.16rem;
  color: var(--tinta); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.bp-programa { display: block; font-weight: 700; color: var(--tinta); }
.bp-programa-nota { display: block; font-size: var(--t--2); color: var(--tinta-3); margin-top: 2px; }
.bp-tag {
  display: inline-block; font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--raio);
  border: 1px solid var(--fio-forte); color: var(--tinta-2); white-space: nowrap;
}
.bp-tag--novela { border-color: var(--fio-carmim); color: var(--carmim-f); }
.bp-tag--jornal { border-color: var(--tinta); color: var(--tinta); }
.bp-tag--esporte { border-color: var(--fio-forte); color: var(--tinta-2); }
.bp-tag--filme, .bp-tag--variedade { border-color: var(--fio); color: var(--tinta-3); }

/* ---------- 16. PROSA E FOTOS DE APOIO ---------- */
.bp-sobre-grade { display: grid; gap: clamp(1.6rem, 3.2vw, 3rem); align-items: start; }
@media (min-width: 960px) {
  .bp-sobre-grade { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .bp-sobre-grade > :last-child { position: sticky; top: 88px; }
}
.bp-prosa h2 { font-size: var(--t-3); }
.bp-prosa h3 { font-size: var(--t-1); margin: 1.7em 0 0.4em; color: var(--tinta); }
.bp-prosa p { color: var(--tinta-2); line-height: 1.68; }
.bp-prosa p strong { color: var(--tinta); }
.bp-artigo { max-width: 78ch; }
.bp-artigo h2 { font-size: var(--t-2); }
.bp-artigo h3 { font-size: var(--t-1); margin: 1.6em 0 0.4em; }
.bp-artigo p { color: var(--tinta-2); line-height: 1.68; }
.bp-artigo ul, .bp-artigo ol { color: var(--tinta-2); padding-left: 1.1em; }
.bp-artigo li { margin-bottom: 0.5em; }
.bp-foto-lado { margin: 0 0 20px; }
.bp-foto-lado img {
  width: 100%; border-radius: var(--raio);
  filter: saturate(1.04) contrast(1.05);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--tinta) 55%, transparent);
  outline: 1px solid color-mix(in oklab, var(--tinta) 40%, transparent);
  outline-offset: -1px;
}
.bp-foto-lado figcaption {
  margin-top: 0; font-size: var(--t--2); letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--tinta-2);
  background: var(--areia); border: 1px solid var(--fio-forte); border-top: 0;
  padding: 9px 13px;
}

/* nota de rodapé de seção */
.bp-nota {
  margin-top: 20px; padding: 15px 0 0;
  border-top: 1px solid var(--fio-forte);
  font-size: var(--t--1); color: var(--tinta-3);
}
.bp-nota p { margin: 0; max-width: 82ch; }
.bp-nota b { color: var(--tinta-2); }
.bp-nota--data { border-top-color: var(--tinta); }
.bp-nota--aviso { border-left: 3px solid var(--carmim); padding: 13px 0 13px 16px; border-top: 0; }
.bp-nota--dica { border-left: 3px solid var(--fio-forte); padding: 13px 0 13px 16px; border-top: 0; }

/* blocos editoriais das internas */
.bp-blocos { display: grid; gap: var(--gap); margin-top: clamp(1.4rem, 2.6vw, 2.1rem); }
@media (min-width: 780px) { .bp-blocos--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 780px) { .bp-blocos { grid-template-columns: repeat(2, 1fr); } }
.bp-bloco {
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
  padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem);
  background: var(--papel);
}
.bp-secao--papel .bp-bloco, .bp-secao--creme2 .bp-bloco { background: var(--papel); }
.bp-bloco-hora {
  display: block; font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--carmim-f);
  margin-bottom: 10px; font-variant-numeric: tabular-nums;
}
.bp-bloco h3 { font-size: var(--t-1); display: flex; align-items: center; gap: 9px; }
.bp-bloco h3 .bp-ic { color: var(--carmim); }
.bp-bloco p { font-size: var(--t--1); color: var(--tinta-2); }
.bp-bloco ul { padding-left: 1.05em; font-size: var(--t--1); color: var(--tinta-2); margin: 0; }
.bp-bloco li { margin-bottom: 0.4em; }

/* páginas legais */
.bp-legal { max-width: 78ch; }
.bp-legal h2 { font-size: var(--t-2); margin-top: 1.8em; }
.bp-legal h3 { font-size: var(--t-1); margin-top: 1.5em; }
.bp-legal p, .bp-legal li { color: var(--tinta-2); }
.bp-legal ul, .bp-legal ol { padding-left: 1.1em; }
.bp-legal-data {
  font-size: var(--t--2); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-3); border-bottom: 1px solid var(--fio-forte); padding-bottom: 16px;
}
.bp-preencher {
  color: var(--tinta-3); border-bottom: 1px dashed var(--fio-forte);
  font-variant-numeric: tabular-nums;
}

/* ---------- 17. CHAMADA DO MEIO ---------- */
.bp-cta-faixa {
  background: var(--areia); color: var(--tinta);
  padding: var(--bloco-g) 0; position: relative; overflow: hidden;
  border-top: 2px solid var(--tinta); border-bottom: 2px solid var(--tinta);
}
.bp-cta-faixa::before { display: none; }
.bp-cta-faixa > .bp-container { position: relative; z-index: 2; }
.bp-cta-grade { display: grid; gap: clamp(1.8rem, 3.4vw, 3.0rem); align-items: end; }
@media (min-width: 940px) { .bp-cta-grade { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); } }
.bp-cta-preco { border-top: 2px solid var(--tinta); padding-top: 22px; }
.bp-cta-valor {
  font-family: var(--display); font-weight: 900; line-height: 0.9;
  color: var(--tinta); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 3px; margin: 0 0 14px;
}
.bp-cta-valor span { font-size: 1.3rem; align-self: flex-start; margin-top: 0.4em; color: var(--carmim); }
.bp-cta-valor b { font-size: clamp(3.4rem, 2.4rem + 3.4vw, 5.4rem); letter-spacing: -0.035em; font-weight: 900; }
.bp-cta-valor i { font-style: normal; font-size: 1.7rem; }
.bp-cta-preco p:last-child { margin: 0; font-size: var(--t--1); color: var(--tinta-3); max-width: 30ch; line-height: 1.5; }
.bp-cta-faixa h2 { font-size: var(--t-4); max-width: 15ch; margin: 0 0 0.38em; color: var(--tinta); }
.bp-cta-faixa p { font-size: var(--t-1); color: var(--tinta-2); max-width: 50ch; line-height: 1.55; }
.bp-cta-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.bp-cta-nota { font-size: var(--t--1); color: var(--tinta-3); margin: 18px 0 0; line-height: 1.5; }

/* ---------- 18. ACESSO EM 3 PASSOS ---------- */
.bp-acessos { display: grid; gap: 0; border-top: 2px solid var(--tinta); }
@media (min-width: 860px) { .bp-acessos { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 60px); } }
.bp-acesso { padding: 26px 0; border-bottom: 1px solid var(--fio-forte); }
.bp-acesso-passo {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(3rem, 2rem + 3vw, 4.6rem); line-height: 0.82;
  color: color-mix(in oklab, var(--carmim) 30%, transparent);
  font-variant-numeric: tabular-nums; margin-bottom: 12px; letter-spacing: -0.03em;
}
.bp-acesso h3 { font-size: var(--t-1); margin: 0 0 0.4em; }
.bp-acesso p { margin: 0; color: var(--tinta-2); font-size: var(--t--1); line-height: 1.56; }

/* ---------- 19. FAQ ---------- */
.bp-faq { border-top: 2px solid var(--tinta); max-width: 96ch; }
.bp-faq-item { border-bottom: 1px solid var(--fio-forte); }
.bp-faq-item summary {
  cursor: pointer; list-style: none; position: relative;
  padding: 20px 52px 20px 0;
  font-family: var(--display); font-weight: 900; text-transform: none;
  font-size: var(--t-1); line-height: 1.18; letter-spacing: -0.005em;
  color: var(--tinta); transition: color .25s var(--saida);
}
.bp-faq-item summary::-webkit-details-marker { display: none; }
.bp-faq-item summary:hover { color: var(--carmim); }
.bp-faq-item summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 14px;
  margin-top: -7px;
  background:
    linear-gradient(currentColor 0 0) center / 14px 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 2px 14px no-repeat;
  transition: transform .35s var(--saida);
}
.bp-faq-item[open] summary { color: var(--carmim); }
.bp-faq-item[open] summary::after { transform: rotate(135deg); }
.bp-faq-resposta { padding: 0 0 24px; max-width: 76ch; }
.bp-faq-resposta p { margin: 0; color: var(--tinta-2); line-height: 1.62; }
.bp-faq-resposta p + p { margin-top: 0.85em; }

/* ---------- 20. EXPLORE ---------- */
.bp-explore {
  display: grid; gap: var(--gap) clamp(24px, 4vw, 60px);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-top: 2px solid var(--tinta); padding-top: 26px;
}
.bp-explore-bloco h3 {
  font-family: var(--texto); font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
  margin-bottom: 16px;
}
.bp-explore-bloco ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bp-explore-bloco a {
  color: var(--tinta); text-decoration: none; font-size: var(--t--1);
  border-bottom: 1px solid transparent; padding-bottom: 2px;
  transition: color .25s var(--saida), border-color .25s var(--saida);
}
.bp-explore-bloco a:hover { color: var(--carmim-f); border-bottom-color: var(--fio-carmim); }

/* ---------- 21. RODAPÉ ---------- */
.bp-rodape {
  background: var(--areia-2); color: var(--tinta-2);
  padding: clamp(2.4rem, 3.4vw, 3.6rem) 0 2.2rem; font-size: var(--t--1);
  border-top: 4px solid var(--carmim);
}
.bp-rodape a { color: var(--tinta-2); text-decoration: none; }
.bp-rodape a:hover { color: var(--carmim-f); }
.bp-rodape-grade { display: grid; gap: clamp(1.6rem, 2.6vw, 2.6rem); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.bp-rodape-marca { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.bp-rodape-marca img { width: 32px; height: 32px; }
.bp-rodape-marca span { font-family: var(--display); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; color: var(--tinta); }
.bp-rodape-sobre { color: var(--tinta-2); max-width: 34ch; }
.bp-rodape-col h3 {
  font-family: var(--texto); font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta); margin-bottom: 14px;
}
.bp-rodape-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bp-rodape-fim { margin-top: clamp(2rem, 3.4vw, 3rem); padding-top: 22px; border-top: 1px solid var(--fio-forte); }
.bp-rodape-legal { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 26px; font-size: var(--t--2); letter-spacing: 0.06em; text-transform: uppercase; }
.bp-rodape-fim p { font-size: var(--t--2); color: var(--tinta-3); max-width: 96ch; line-height: 1.6; }
.bp-aviso-marcas { line-height: 1.6; }

/* ---------- 22. BARRA FIXA DE CONVERSÃO (celular) ---------- */
.bp-barra {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  background: color-mix(in oklab, var(--papel) 97%, transparent);
  backdrop-filter: blur(10px);
  border-top: 2px solid var(--tinta);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 14px;
}
.bp-barra-texto {
  font-family: var(--display); font-weight: 900; text-transform: uppercase;
  line-height: 1.05; font-size: 1.02rem; color: var(--tinta);
}
.bp-barra-texto span {
  display: block; font-family: var(--texto); font-weight: 400;
  text-transform: none; font-size: var(--t--2); color: var(--tinta-3); letter-spacing: 0;
}
.bp-barra .bp-btn { margin-left: auto; flex: none; }
@media (min-width: 900px) { .bp-barra { display: none; } }
/* onde a barra fixa existe, o widget de WhatsApp sobe para não cobrir o CTA.
   A regra mora aqui, com especificidade maior, para não tocar no bloco do widget. */
@media (max-width: 899.98px) {
  body { padding-bottom: 82px; }
  body .bp-zap { bottom: 96px; }
}
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 899.98px) { body .bp-zap { bottom: calc(96px + env(safe-area-inset-bottom)); } }
}

/* ---------- 22b. RESPOSTA CITÁVEL EM FAIXA (antes da dobra e no meio) ---------- */
/* proporção do .vc: caixa estreita, corpo menor que o texto da página */
.bp-resposta--faixa {
  background: var(--areia);
  border-bottom: 1px solid var(--fio-forte);
  padding: clamp(13px, 1.6vw, 20px) 0;
}
.bp-resposta--faixa .bp-resposta-caixa {
  max-width: 78ch; margin-left: 0;
  border-left: 4px solid var(--carmim);
  padding: 2px 0 2px clamp(14px, 1.8vw, 22px);
}
.bp-resposta--faixa .bp-resposta-caixa p {
  font-size: var(--t--1); line-height: 1.56; margin: 0; max-width: none;
  color: var(--tinta-2);
}
.bp-resposta--faixa .bp-resposta-caixa p + p { margin-top: 0.6em; }
.bp-resposta--faixa .bp-resposta-caixa p strong { color: var(--tinta); }
@media (min-width: 960px) { .bp-resposta--faixa .bp-resposta-caixa { margin-left: 0; } }

/* ---------- 22c. LINHA DE CONFIANÇA COM ROSTOS ---------- */
.bp-confia {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: clamp(16px, 2vw, 22px);
  padding-top: clamp(14px, 1.8vw, 20px);
  border-top: 1px solid var(--fio-forte);
}
.bp-confia-rostos { display: flex; align-items: center; flex: none; }
.bp-confia-rostos img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 2px solid var(--papel);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinta) 30%, transparent);
}
.bp-confia-rostos img + img { margin-left: -13px; }
.bp-confia-nota {
  display: flex; align-items: center; gap: 8px; margin: 0 0 3px;
}
.bp-confia-nota svg { width: 86px; height: 16px; color: var(--carmim); flex: none; }
.bp-confia-nota b {
  font-family: var(--display); font-weight: 900; font-size: 1.06rem;
  color: var(--tinta); letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
}
.bp-confia-texto { margin: 0; font-size: var(--t--1); color: var(--tinta-2); max-width: 40ch; }
.bp-confia-texto strong { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 22d. DEPOIMENTOS EM TRÊS CARTÕES ---------- */
.bp-depos {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: stretch;
}
.bp-depo {
  display: flex; flex-direction: column;
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
  background: var(--papel);
  padding: clamp(1.15rem, 0.95rem + 1vw, 1.85rem);
  transition: border-color .3s var(--saida), box-shadow .3s var(--saida);
}
.bp-secao--papel .bp-depo, .bp-secao--creme2 .bp-depo { background: var(--papel); }
.bp-depo:hover {
  border-color: color-mix(in oklab, var(--tinta) 40%, transparent);
  box-shadow: var(--sombra-p);
}
.bp-depo-estrelas { display: block; margin-bottom: 14px; }
.bp-depo-estrelas svg { width: 92px; height: 17px; color: var(--carmim); }
.bp-depo-aspas {
  margin: 0 0 22px; font-size: var(--t-0); line-height: 1.62;
  color: var(--tinta); max-width: none; flex: 1 1 auto;
}
.bp-depo-autor {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 3px 13px;
  border-top: 1px solid var(--fio-forte); padding-top: 16px;
}
.bp-depo-rosto {
  grid-row: span 2; width: 52px; height: 52px; border-radius: 50%;
  object-fit: cover; flex: none; border: 1px solid var(--fio-forte);
}
.bp-depo-nome {
  align-self: end; margin: 0; font-weight: 700;
  font-size: var(--t-0); color: var(--tinta); line-height: 1.2;
}
.bp-depo-papel {
  align-self: start; margin: 0; font-size: var(--t--2);
  color: var(--tinta-3); line-height: 1.3;
}
.bp-depo-selo {
  grid-column: 1 / -1; margin-top: 13px;
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--carmim-f); border: 1px solid var(--fio-carmim);
  border-radius: var(--raio); padding: 4px 9px;
}
.bp-depo-selo svg { width: 12px; height: 12px; flex: none; }

/* ---------- 22e. PLANOS: ECONOMIA, CUSTO POR DIA, ITEM AUSENTE ---------- */
/* nome em cima, selo embaixo, sempre: assim o preco dos quatro cartoes cai na
   mesma linha e a coluna le como tabela, nao como quatro cartoes soltos. */
.bp-plano-topo { display: block; margin-bottom: 14px; }
.bp-plano-topo .bp-plano-nome { margin: 0 0 9px; }
.bp-plano-selo {
  display: inline-block; flex: 0 0 auto; margin: 0; white-space: nowrap;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--carmim-f); border: 1px solid var(--fio-carmim);
  border-radius: var(--raio); padding: 4px 8px;
}
.bp-plano--destaque .bp-plano-selo { color: var(--carmim-f); border-color: var(--fio-carmim); }
.bp-plano-ciclo strong { color: var(--carmim-f); font-weight: 700; }
.bp-plano--destaque .bp-plano-ciclo strong { color: var(--carmim-f); }
.bp-plano-dia {
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
  padding: 10px 12px; margin: 0 0 18px;
  font-size: var(--t--1); line-height: 1.4; color: var(--tinta-2);
  background: var(--areia);
}
.bp-plano-dia strong { color: var(--tinta); font-weight: 700; font-variant-numeric: tabular-nums; }
.bp-plano--destaque .bp-plano-dia {
  border-color: var(--fio-carmim);
  background: color-mix(in oklab, var(--carmim) 8%, transparent);
  color: var(--tinta-2);
}
.bp-plano--destaque .bp-plano-dia strong { color: var(--tinta); }
.bp-plano-itens--mar li { padding-left: 25px; }
.bp-plano-itens--mar li::before { display: none; }
.bp-plano-itens .bp-mar {
  position: absolute; left: 0; top: 0.16em;
  width: 15px; height: 15px; color: var(--carmim);
}
.bp-plano--destaque .bp-plano-itens .bp-mar { color: var(--carmim); }
.bp-plano-itens .bp-nao { color: var(--tinta-3); }
.bp-plano-itens .bp-nao .bp-mar { color: color-mix(in oklab, var(--tinta) 42%, transparent); }
.bp-plano--destaque .bp-plano-itens .bp-nao { color: var(--tinta-3); }
.bp-plano--destaque .bp-plano-itens .bp-nao .bp-mar { color: color-mix(in oklab, var(--tinta) 42%, transparent); }
.bp-plano-pe { display: flex; align-items: center; justify-content: center; gap: 7px; }
.bp-plano-pe svg { width: 13px; height: 13px; flex: none; }

/* ---------- 22f. RECURSOS COM AZULEJO DE ÍCONE ---------- */
.bp-recurso-tile {
  width: 46px; height: 46px; border-radius: var(--raio);
  display: grid; place-items: center; margin-bottom: 16px;
  background: var(--carmim);
  border: 1px solid var(--carmim);
  color: var(--papel);
}
.bp-recurso-tile svg { width: 23px; height: 23px; stroke-width: 1.6; }
.bp-recurso--tile h3 { display: block; }
.bp-recurso--tile { padding-top: 26px; }

/* passos numerados das internas */
.bp-passos { display: grid; gap: 0; border-top: 2px solid var(--tinta); margin-top: clamp(1.2rem, 2.4vw, 1.9rem); }
@media (min-width: 860px) { .bp-passos { grid-template-columns: repeat(3, 1fr); column-gap: clamp(24px, 4vw, 60px); } }
.bp-passos > * { padding: 24px 0; border-bottom: 1px solid var(--fio-forte); }
.bp-passos h3 { font-size: var(--t-1); margin: 0 0 0.4em; color: var(--tinta); }
.bp-passos p { margin: 0; color: var(--tinta-2); font-size: var(--t--1); line-height: 1.56; }
.bp-capa-botoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 2.6vw, 26px); }

/* ---------- 22g. BLOG: lista de textos e sumario ---------- */
/* mesma pele, mesmo ritmo tabular: fita de emissora, filete, sem sombra */
.bp-posts { display: grid; gap: var(--gap); margin-top: clamp(1.2rem, 2.4vw, 1.9rem); }
@media (min-width: 780px) { .bp-posts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .bp-posts { grid-template-columns: repeat(3, 1fr); } }
.bp-post {
  display: flex; flex-direction: column;
  border: 1px solid var(--fio-forte); border-radius: var(--raio);
  background: var(--papel);
}
.bp-secao--papel .bp-post, .bp-secao--creme2 .bp-post { background: var(--papel); }
.bp-post-fita { height: 5px; background: var(--carmim); flex: none; }
.bp-post-corpo { padding: clamp(1rem, 0.85rem + 0.7vw, 1.5rem); display: flex; flex-direction: column; flex: 1 1 auto; }
.bp-post-tag {
  display: inline-block; align-self: flex-start; margin-bottom: 12px;
  font-size: var(--t--2); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--carmim-f); border: 1px solid var(--fio-carmim);
  border-radius: var(--raio); padding: 4px 9px;
}
.bp-post h3 { font-size: var(--t-1); margin: 0 0 0.5em; line-height: 1.08; }
.bp-post h3 a { color: var(--tinta); text-decoration: none; }
.bp-post h3 a:hover { color: var(--carmim-f); }
.bp-post p { margin: 0; color: var(--tinta-2); font-size: var(--t--1); line-height: 1.55; }
.bp-post-pe {
  margin-top: auto !important; padding-top: 14px;
  border-top: 1px solid var(--fio-forte);
  font-size: var(--t--2) !important; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tinta-3) !important;
}
.bp-post-corpo > p:not(.bp-post-pe) { margin-bottom: 16px; }

.bp-sumario {
  border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--fio-forte);
  padding: 18px 0 16px; margin: 0 0 clamp(1.6rem, 3vw, 2.4rem);
  max-width: 62ch;
}
.bp-sumario h2 {
  font-family: var(--texto); font-size: var(--t--2); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinta-3);
  margin: 0 0 14px;
}
.bp-sumario ol { margin: 0; padding: 0; list-style: none; counter-reset: sum; display: grid; gap: 9px; }
.bp-sumario li { counter-increment: sum; display: flex; gap: 12px; align-items: baseline; font-size: var(--t--1); }
.bp-sumario li::before {
  content: counter(sum, decimal-leading-zero);
  font-family: var(--display); font-weight: 900; font-size: 1rem;
  color: var(--carmim); font-variant-numeric: tabular-nums; flex: none;
}
.bp-sumario a { color: var(--tinta); text-decoration: none; border-bottom: 1px solid transparent; }
.bp-sumario a:hover { color: var(--carmim-f); border-bottom-color: var(--fio-carmim); }

/* ---------- 23. MOVIMENTO ---------- */
@keyframes bp-sobe {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes bp-abre {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0 0); }
}
.bp-entra { animation: bp-sobe .9s var(--saida) both; animation-delay: var(--d, 0ms); }
.bp-hero-foto { animation: bp-abre 1.1s var(--saida) both; animation-delay: 120ms; }

/* Entrada por scroll. A classe .bp-entrada é posta pelo próprio bp.js: se o
   script não rodar, ela nunca existe e o conteúdo aparece normalmente. */
@media (prefers-reduced-motion: no-preference) {
  .bp-entrada {
    opacity: 0; transform: translate3d(0, 22px, 0);
    transition: opacity .75s var(--saida), transform .75s var(--saida);
    transition-delay: var(--d, 0ms);
  }
  .bp-entrada.bp-visivel { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
  }
  .bp-faixa-trilho { animation: none; width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .bp-faixa-trilho > .bp-faixa-item:nth-child(n + 9) { display: none; }
}