/* ═══════════════════════════════════════════════════════════
   BÔNUS · MCP DO CLAUDE — a MESMA dobra da home, reaproveitada.

   Antes cada página de segmento tinha uma versão própria, centrada e
   sem o box de degradê. A Hyros constrói o bloco uma vez e repete
   igual em toda página de nicho; é o que dá liga entre elas.

   Depende de .msc-brinde / .msc-claude do _mascote.css.
   ═══════════════════════════════════════════════════════════ */

.bon{position:relative;background:var(--off-white);padding:var(--sp-16) var(--sp-6)}
.bon-box{max-width:1160px;margin:0 auto;position:relative;
  border:1.5px solid transparent;border-radius:26px;
  background:linear-gradient(var(--cream),var(--cream)) padding-box,
             linear-gradient(124deg,#FFB800,#FF6B35 44%,#D97757) border-box;
  box-shadow:0 30px 70px rgba(10,10,11,.08);
  display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--sp-8);align-items:center;padding:var(--sp-9) var(--sp-10)}
.bon-h2{font-family:var(--font-voz);font-variation-settings:var(--voz-eixo);font-weight:400;
  font-size:clamp(1.875rem,1.3rem + 2.1vw,2.625rem);line-height:1.06;letter-spacing:-.03em;
  color:var(--preto);margin:12px 0 0}
.bon-h2 em{font-style:italic;color:#D97757}
.bon-d{font-size:1rem;line-height:1.62;color:var(--gray-body);max-width:46ch;margin:14px 0 0}
.bon-acoes{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.bon-a{font-size:.8125rem;color:var(--gray-texto);background:var(--branco);
  border:1px solid var(--border);border-radius:999px;padding:7px 14px;white-space:nowrap}
.bon-a b{font-weight:600;color:var(--preto)}
.bon-fig{justify-self:center}
.bon .msc-brinde{--px:9px}

@media (max-width:860px){
  .bon-box{grid-template-columns:1fr;text-align:center;padding:var(--sp-8) var(--sp-6)}
  .bon-d{max-width:none;margin-inline:auto}
  .bon-acoes{justify-content:center}
  /* nowrap serve no desktop, onde o chip cabe inteiro; numa coluna de 300px
     ele vaza para fora do box */
  .bon-a{white-space:normal}
}