/* BodyB Oferta: estrutura da página e Hero.
   Cores, tipos e medidas vêm dos tokens do Design System BodyB v1.17 (public/ds/tokens.css).
   Fontes por propriedades explícitas (Design System v1.17). */

/* ==========================================================================
   Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--brand-offwhite); color: var(--brand-graphite);
  font-family: var(--font-condensed); font-size: 17px; font-weight: 400; line-height: 1.65;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; font-size: 17px; }
.ico { width: 1em; height: 1em; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--brand-graphite); outline-offset: 3px; }
.mono { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase; }
.pular { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 16px; border-radius: var(--radius-10); background: var(--brand-green); color: var(--brand-graphite); font-weight: 700; text-decoration: none; }
.pular:focus { top: 12px; }
@media (min-width: 640px) { .bb-cabecalho__logo { height: 40px; } }
.bb-cabecalho__logo { height: 36px; }

/* ==========================================================================
   Dobras (respiro de 56 px abaixo de 1024 px e 88 px a partir dele, v1.10)
   ========================================================================== */
.pg-dobra { position: relative; padding: var(--space-56) 16px; }
.pg-heroi { padding-top: var(--space-40); }
.pg-branco { background: var(--surface-white); }
.pg-creme { background: var(--brand-offwhite); }
.pg-coluna { max-width: var(--measure-coluna); margin-inline: auto; }
@media (min-width: 1024px) { .pg-dobra { padding-block: var(--space-88); } .pg-heroi { padding-top: var(--space-56); } }

/* Título: 28 px (até 3 linhas no h1 do topo, v1.10) e 42 px a partir de 1024 px (até 2 linhas, v1.13). */
.pg-titulo { margin: 0; font-family: var(--font-condensed); font-size: 28px; font-weight: 700; line-height: 1.16; letter-spacing: -0.01em; text-wrap: balance; }
@media (min-width: 1024px) { .pg-titulo { font-size: 42px; } }
/* Respiro antes do destaque no meio da linha (mesma solução da landing SPEAKERS). */
.pg-destaque-respiro { display: inline-block; width: 0.36em; }

/* ==========================================================================
   Dobra 1: Hero (verde, opção D do fundador, 08/11/2026). Moldura verde (selo, destaque, fechamento);
   miolo lilás (chips e foto pendente), v1.10. Topo sem bolhas, v1.12.
   ========================================================================== */
.heroi { display: grid; gap: 0; grid-template-areas: "selo" "titulo" "lead" "foto" "chips" "fecho"; }
.heroi__selo { grid-area: selo; justify-self: start; margin-bottom: var(--space-18); }
.heroi__titulo { grid-area: titulo; }
.heroi__lead { grid-area: lead; margin-top: var(--space-16); font-size: 19px; line-height: 1.6; color: var(--brand-graphite); max-width: var(--measure-subtitulo); }
.heroi__lead b { font-weight: 500; }
.heroi__foto { grid-area: foto; margin-top: 28px; }
.heroi .bb-lista { grid-area: chips; }
.heroi .bb-fechamento { grid-area: fecho; margin-top: 24px; }

@media (min-width: 768px) {
  .heroi {
    column-gap: 64px; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "selo foto" "titulo foto" "lead foto" "chips foto" "fecho foto";
    grid-template-rows: auto auto auto auto 1fr;
  }
  .heroi__foto { margin-top: 0; align-self: center; }
  .heroi .bb-lista { grid-template-columns: 1fr; }
}

/* Foto pendente (padrão do SPEAKERS): tracejado de 1,5 px, tom claro, bolhas e descrição. Verde: miolo da dobra lilás. */
.pg-foto {
  width: 100%; max-width: 520px; margin-inline: auto; aspect-ratio: 4 / 5;
  display: grid; place-items: center; align-content: center; gap: 10px; padding: 20px; text-align: center;
  border-radius: var(--radius-12); background: var(--green-15); border: 1.5px dashed var(--green-45);
}
.heroi__imagem { width: 100%; max-width: 520px; height: auto; margin-inline: auto; border-radius: var(--radius-12); }
.pg-foto--lilas { background: var(--lilac-20); border-color: var(--lilac-65); }
.pg-foto .bb-simbolo-linha { margin: 0; }
.pg-foto b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-support); }
.pg-foto small { font-size: 14px; line-height: 1.45; color: var(--text-support); max-width: 32ch; }

/* Abertura das demais dobras: símbolo de bolhas centralizado na cor da dobra. */
.pg-abre { margin-bottom: 28px; }
.pg-abre .bb-simbolo-linha { margin: 0; }