/* ==========================================================================
   BOTICA NOTURNA — componentes · botica.css · v1.1 · 2026-09-14
   Spec: design-system/DESIGN-BOTICA-NOTURNA.md (§6 tipografia, §7 layout, §8 componentes)
   --------------------------------------------------------------------------
   ORDEM DE CARGA (obrigatoria):
     1. fontes  (tokens/fonts.html ou tokens/next-fonts.ts)
     2. tokens  (tokens/tokens.css)        -> define --bn-* e os escopos de superficie
     3. este arquivo (components/css/botica.css)
     4. botica.js (HTML puro)  ou  components/react (React) — nunca os dois na mesma pagina

   CONTRATO
   - Prefixo unico .bn-*. Componentes consomem SO tokens de papel
     (--bn-bg, --bn-panel, --bn-panel-2, --bn-ink, --bn-ink-2, --bn-ink-3, --bn-line,
     --bn-line-strong, --bn-cta-*, --bn-focus, --bn-state-*...) + tom local
     (--bn-tone, --bn-tone-hsl, --bn-tone-text, --bn-field-hsl, --bn-field-alpha) + ambar.
     Assim cada componente funciona dentro de .bn-surface-night e .bn-surface-cream.
   - Cor de colecao: SEMPRE pelo atributo data-col="passeio|banho|calma|boca|barriga|mesa|cuidados"
     (tokens.css resolve glow na noite / deep no creme). Nao existem classes --passeio:
     a v1.1 proibe mapeamentos proprios das 7 colecoes (spec §5).
     Intensidade do campo: data-glow="soft|hero", ancora: data-glow-at="br|r|tr|c".
   - Nomes da spec sao canonicos; aliases aceitos (mesmo CSS):
       .bn-glow-card = .bn-card com campo · .bn-stat = .bn-ficha · .bn-label-tag = .bn-etiqueta
       .bn-glass-card = .bn-glass · .bn-corner-labels = .bn-corners · .bn-dim = .bn-tone-2
       .bn-panel--cream = .bn-sheet (exige .bn-surface-cream no mesmo elemento)
   - Tudo visivel em repouso. Nenhum elemento fica em opacity 0 esperando JS.
   - prefers-reduced-motion: tokens zeram duracoes; este arquivo desliga os loops.

   INTEGRACAO
   - Sem @layer: vence o preflight do Tailwind 3 (button/a/h1 resets) por ordem de carga.
   - Tailwind 4: importe com  @import "./botica.css" layer(components);
   - Container queries: .bn-panel, .bn-card, .bn-ficha, .bn-glass, .bn-dial declaram
     container-type: inline-size -> precisam de largura vinda do layout (grid/bloco), nunca
     de flex item com flex: none sem width.
   ========================================================================== */

/* Tipos registrados: permitem transicao suave do boost do campo e da amplitude do HUD. */
@property --bn-glow-boost { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --bn-hud-amp { syntax: "<number>"; inherits: true; initial-value: 0; }

/* box-sizing so para elementos do sistema (especificidade zero) */
:where([class^="bn-"], [class*=" bn-"]),
:where([class^="bn-"], [class*=" bn-"])::before,
:where([class^="bn-"], [class*=" bn-"])::after { box-sizing: border-box; }

/* ==========================================================================
   0. UTILITARIOS BASE
   ========================================================================== */
.bn-sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.bn-skip {
  position: fixed; top: 12px; left: var(--bn-gutter); z-index: var(--bn-z-skip);
  display: inline-flex; align-items: center; height: var(--bn-btn-h-sm); padding: 0 16px;
  border: 1px solid var(--bn-night-line-strong); border-radius: var(--bn-r-sm);
  background-color: var(--bn-night-overlay); color: var(--bn-night-ink);
  font: var(--bn-fw-medium) var(--bn-fs-small)/1 var(--bn-font-body);
  text-decoration: none;
  transform: translateY(calc(-100% - 24px));
}
.bn-skip:focus, .bn-skip:focus-visible { transform: none; outline: none; box-shadow: var(--bn-shadow-focus-night); }

.bn-icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Foco no fluxo da pagina: outline 2px --bn-focus (ambar na noite, forest no creme) */
:is(.bn-btn, .bn-chip, .bn-link, .bn-card, .bn-glow-card, .bn-list-row, .bn-nav__brand, .bn-nav__link,
    .bn-nav__toggle, .bn-menu__link, .bn-segmented__item, .bn-faq__summary, .bn-choice,
    .bn-footer a, .bn-corners a, .bn-glass__close, .bn-prose a, .bn-table a, .bn-check):focus-visible {
  outline: 2px solid var(--bn-focus);
  outline-offset: 2px;
}
/* Objetos fixos/flutuantes (podem passar sobre o creme): anel duplo, nunca outline solto */
:is(.bn-orb, .bn-bottombar a, .bn-bottombar button):focus-visible {
  outline: none;
  box-shadow: var(--bn-shadow-focus-night);
}

/* ==========================================================================
   1. TIPOGRAFIA
   ========================================================================== */
.bn-display-xl, .bn-display-l, .bn-display-m, .bn-panel-head, .bn-title, .bn-title-s {
  margin: 0;
  font-family: var(--bn-font-display);
  font-weight: var(--bn-fw-display);
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  color: var(--bn-ink);
}
.bn-display-xl {
  font-size: var(--bn-fs-display-xl);
  line-height: var(--bn-lh-display-xl);
  letter-spacing: var(--bn-ls-display-xl);
  text-wrap: balance;
}
.bn-display-xl:has(.bn-accent) { line-height: var(--bn-lh-display-xl-accent); }
.bn-display-l {
  font-size: var(--bn-fs-display-l);
  line-height: var(--bn-lh-display-l);
  letter-spacing: var(--bn-ls-display-l);
  text-wrap: balance;
}
.bn-display-l:has(.bn-accent) { line-height: var(--bn-lh-display-l-accent); }
.bn-display-m {
  font-size: var(--bn-fs-display-m);
  line-height: var(--bn-lh-display-m);
  letter-spacing: var(--bn-ls-display-m);
  text-wrap: balance;
}
/* headline DENTRO de painel/card (cqi): nunca display-* em componente com largura propria */
.bn-panel-head {
  max-width: 16ch;
  font-size: var(--bn-fs-panel-head);
  line-height: var(--bn-lh-panel-head);
  letter-spacing: var(--bn-ls-panel-head);
  text-wrap: balance;
}
.bn-title { font-size: var(--bn-fs-title); line-height: var(--bn-lh-title); letter-spacing: var(--bn-ls-title); }
.bn-title-s { font-size: var(--bn-fs-title-s); line-height: var(--bn-lh-title-s); letter-spacing: var(--bn-ls-title-s); }

/* +.04 de line-height quando uma linha comeca com maiuscula acentuada (É, À, Ó) */
.bn-lh-plus { line-height: calc(var(--bn-lh-display-l) + 0.04); }
/* respiro horizontal para display-xl/l com acento dentro de overflow:hidden */
.bn-accent-guard { padding-inline: var(--bn-accent-guard); }

.bn-body-l, .bn-body, .bn-body-s, .bn-small, .bn-caption, .bn-micro {
  margin: 0;
  font-family: var(--bn-font-body);
  font-weight: var(--bn-fw-body);
}
.bn-body-l { font-size: var(--bn-fs-body-l); line-height: var(--bn-lh-body-l); }
.bn-body { font-size: var(--bn-fs-body); line-height: var(--bn-lh-body); }
.bn-body-s { font-size: var(--bn-fs-body-s); line-height: var(--bn-lh-body-s); }
.bn-small { font-size: var(--bn-fs-small); line-height: var(--bn-lh-small); }
.bn-caption { font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); }
.bn-micro { font-size: var(--bn-fs-micro); line-height: var(--bn-lh-micro); }
.bn-lead { max-width: 44ch; color: var(--bn-ink-2); }

/* Eyebrow: 13px sentence case ink-2 (nunca caixa alta, nunca ponto final) */
.bn-eyebrow {
  margin: 0;
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-eyebrow);
  line-height: var(--bn-lh-eyebrow);
  font-weight: var(--bn-fw-body);
  letter-spacing: 0;
  text-transform: none;
  color: var(--bn-ink-2);
}

/* Mono-label: JetBrains Mono 500 11px CAIXA ALTA ls .08em (max. 2 por painel) */
.bn-mono-label {
  margin: 0;
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-mono-label);
  line-height: var(--bn-lh-mono-label);
  font-weight: var(--bn-fw-medium);
  letter-spacing: var(--bn-ls-mono-label);
  text-transform: uppercase;
  color: var(--bn-ink-2);
}
.bn-mono-label--ink { color: var(--bn-ink); }

/* Estilo HUD em texto (mono, caixa normal, com unidade): "6 min de leitura" */
.bn-hud-text {
  margin: 0;
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-hud);
  line-height: 1.4;
  letter-spacing: var(--bn-ls-hud);
  font-weight: 400;
  color: var(--bn-ink-2);
}
.bn-hud-text b, .bn-hud-text strong { font-weight: 500; color: var(--bn-ink); }

/* Acento Fraunces italico (1-3 palavras, 1 por headline, nunca no corpo) */
.bn-accent {
  font-family: var(--bn-font-accent);
  font-style: italic;
  font-weight: var(--bn-fw-accent);
  font-size: var(--bn-accent-size);
  letter-spacing: var(--bn-ls-accent);
  font-variation-settings: var(--bn-fvs-accent);
  font-synthesis: none;
  text-transform: none;
  padding-inline-end: var(--bn-accent-overhang);
}
/* Nome cientifico (pendente §2.4 #10) */
.bn-botanical {
  font-family: var(--bn-font-accent);
  font-style: italic;
  font-weight: 400;
  font-size: var(--bn-fs-small);
  line-height: var(--bn-lh-small);
  font-variation-settings: var(--bn-fvs-botanical);
  font-synthesis: none;
}

/* Headline 2 tons: continuacao em ink-3 (so texto >=24px) */
.bn-tone-2, .bn-dim { color: var(--bn-ink-3); }

.bn-ink { color: var(--bn-ink); }
.bn-ink-2 { color: var(--bn-ink-2); }
.bn-ink-3 { color: var(--bn-ink-3); }
.bn-tone-text { color: var(--bn-tone-text); }
.bn-tabular { font-variant-numeric: tabular-nums; }
.bn-nowrap { white-space: nowrap; }

.bn-link {
  color: var(--bn-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bn-link-underline);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-link:hover { text-decoration-color: currentColor; }

/* Lockup "Bicho Organico" + metadado real (traducao do E-LAB da EQUA, sem "labs") */
.bn-lockup { display: flex; flex-direction: column; gap: 2px; }
.bn-lockup__brand {
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-caption);
  line-height: var(--bn-lh-caption);
  font-weight: var(--bn-fw-medium);
  color: var(--bn-ink);
}

/* Prosa de artigo na folha creme */
.bn-prose {
  max-width: var(--bn-max-text);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-article);
  line-height: var(--bn-lh-article);
  color: var(--bn-ink);
}
.bn-prose > * { margin-block: 0; }
.bn-prose > * + * { margin-top: 1.1em; }
.bn-prose > p:first-child { font-size: var(--bn-fs-body-l); }
.bn-prose h2 {
  margin-top: 48px;
  font-family: var(--bn-font-display); font-weight: 600;
  font-size: var(--bn-fs-h2-article); line-height: var(--bn-lh-h2-article); letter-spacing: -0.015em;
}
.bn-prose h3 {
  margin-top: 32px;
  font-family: var(--bn-font-display); font-weight: 600;
  font-size: var(--bn-fs-h3-article); line-height: var(--bn-lh-h3-article); letter-spacing: -0.01em;
}
.bn-prose h2 + *, .bn-prose h3 + * { margin-top: 12px; }
.bn-prose a { color: var(--bn-link); text-decoration-color: var(--bn-link-underline); text-underline-offset: 4px; }
.bn-prose blockquote {
  margin-inline: 0; padding-left: 20px;
  border-left: 2px solid var(--bn-tone-neutral);
  font-family: var(--bn-font-display); font-weight: 600;
  font-size: var(--bn-fs-title); line-height: var(--bn-lh-title); letter-spacing: var(--bn-ls-title);
}
.bn-prose img { max-width: 100%; height: auto; border-radius: var(--bn-r-md); }
.bn-prose figcaption { margin-top: 8px; font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); color: var(--bn-ink-2); }
.bn-prose ul, .bn-prose ol { padding-left: 1.25em; }

/* ==========================================================================
   2. LAYOUT · pagina, container, secao, grid, split, bento, stack
   ========================================================================== */
.bn-page {
  min-height: 100svh;
  background-color: var(--bn-bg);
  color: var(--bn-ink);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-body);
  line-height: var(--bn-lh-body);
  padding-bottom: calc(56px + var(--bn-bottom-bar-h) + env(safe-area-inset-bottom));
  overflow-x: clip;
}
/* pinta o fundo do escopo atual (use com .bn-surface-night em secoes abertas) */
.bn-fill { background-color: var(--bn-bg); color: var(--bn-ink); }

.bn-container {
  width: 100%;
  max-width: var(--bn-max-panels);
  margin-inline: auto;
  padding-inline: var(--bn-gutter);
}
.bn-section { padding-block: var(--bn-section-y); }
.bn-section--flush-top { padding-top: 0; }
.bn-section--flush-bottom { padding-bottom: 0; }
/* "armario": linhas de paineis com gap constante */
.bn-rows { display: flex; flex-direction: column; gap: var(--bn-gap-panel); }
/* primeira secao sem hero: compensa a nav fixa */
.bn-nav-offset { padding-top: calc(var(--bn-navbar-h) + env(safe-area-inset-top) + 32px); }

.bn-section-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: clamp(32px, 4vw, 56px); }
.bn-section-head > :is(.bn-display-m, .bn-display-l) { max-width: 20ch; }
.bn-section-head--center { align-items: center; text-align: center; }

/* Grid de paineis: 1 col < 768 · 6 col 768-1023 · 12 col >= 1024 */
.bn-grid, .bn-bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bn-gap-panel);
}
.bn-grid > *, .bn-bento > * { min-width: 0; }
.bn-grid--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* fichas com valor <= 4 caracteres no mobile */

@media (min-width: 768px) {
  .bn-grid, .bn-bento, .bn-grid--2up { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bn-grid > *, .bn-bento > * { grid-column: span 6; }
  .bn-grid > :is(.bn-span-3, .bn-span-4), .bn-bento > :is(.bn-span-3, .bn-span-4) { grid-column: span 3; }
  .bn-bento--asym > * { grid-column: span 3; }
  .bn-bento--asym > :first-child { grid-column: span 6; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* trio 4+4+4 no tablet: 3 + 3, terceiro 6 */
  .bn-grid > .bn-span-4:nth-child(3):last-child { grid-column: span 6; }
  .bn-grid > .bn-t-6, .bn-bento > .bn-t-6 { grid-column: span 6; }
  .bn-grid > .bn-t-3, .bn-bento > .bn-t-3 { grid-column: span 3; }
}
@media (min-width: 1024px) {
  .bn-grid, .bn-bento, .bn-grid--2up { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bn-grid > *, .bn-bento > * { grid-column: span 12; }
  .bn-grid > .bn-span-3, .bn-bento > .bn-span-3 { grid-column: span 3; }
  .bn-grid > .bn-span-4, .bn-bento > .bn-span-4 { grid-column: span 4; }
  .bn-grid > .bn-span-5, .bn-bento > .bn-span-5 { grid-column: span 5; }
  .bn-grid > .bn-span-6, .bn-bento > .bn-span-6 { grid-column: span 6; }
  .bn-grid > .bn-span-7, .bn-bento > .bn-span-7 { grid-column: span 7; }
  .bn-grid > .bn-span-8, .bn-bento > .bn-span-8 { grid-column: span 8; }
  .bn-grid > .bn-span-12, .bn-bento > .bn-span-12 { grid-column: span 12; }
  .bn-grid > .bn-row-2, .bn-bento > .bn-row-2 { grid-row: span 2; }
  /* bento assimetrico: 8 (2 linhas) + 4 + 4 */
  .bn-bento--asym > * { grid-column: span 4; }
  .bn-bento--asym > :first-child { grid-column: span 8; grid-row: span 2; }
}

/* Split: texto + midia. Empilha (texto primeiro) abaixo de 1024px */
.bn-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bn-gap-panel);
}
.bn-split > * { min-width: 0; }
@media (min-width: 1024px) {
  .bn-split { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bn-split > * { grid-column: span 6; min-height: clamp(560px, 46vw, 760px); }
  .bn-split--5-7 > :first-child { grid-column: span 5; }
  .bn-split--5-7 > :last-child { grid-column: span 7; }
  .bn-split--7-5 > :first-child { grid-column: span 7; }
  .bn-split--7-5 > :last-child { grid-column: span 5; }
  .bn-split--reverse > :last-child { order: -1; }
  .bn-split--auto > * { min-height: 0; }
}

.bn-stack { display: flex; flex-direction: column; gap: var(--bn-stack-gap, var(--bn-space-4)); }
.bn-stack--1 { --bn-stack-gap: var(--bn-space-1); }
.bn-stack--2 { --bn-stack-gap: var(--bn-space-2); }
.bn-stack--3 { --bn-stack-gap: var(--bn-space-3); }
.bn-stack--4 { --bn-stack-gap: var(--bn-space-4); }
.bn-stack--5 { --bn-stack-gap: var(--bn-space-5); }
.bn-stack--6 { --bn-stack-gap: var(--bn-space-6); }
.bn-stack--7 { --bn-stack-gap: var(--bn-space-7); }
.bn-stack--8 { --bn-stack-gap: var(--bn-space-8); }
.bn-stack--center { align-items: center; text-align: center; }
/* botoes e chips numa pilha nao esticam (link centralizado na coluna parecia solto) */
.bn-stack:not(.bn-stack--center) > :is(.bn-btn:not(.bn-btn--block), .bn-chip) { align-self: flex-start; }
.bn-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bn-cluster-gap, var(--bn-space-3)); }

/* ==========================================================================
   3. PAINEIS E SUPERFICIES
   ========================================================================== */
.bn-panel {
  position: relative;
  container-type: inline-size;
  padding: var(--bn-pad-panel);
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-lg);
}
.bn-panel--sm { border-radius: var(--bn-r-md); }         /* paineis <= 480px */
.bn-panel--flush { padding: 0; }
/* .bn-panel--brand (tokens.css) remapeia --bn-panel para forest-deep: 1 por pagina */

/* Painel de texto (EQUA): eyebrow no topo, headline no centro, paragrafo na base */
.bn-panel--text { display: flex; flex-direction: column; align-items: flex-start; }
.bn-panel--text > .bn-panel__head { margin-block: auto; padding-block: 48px; }
.bn-panel__body {
  margin: 0;
  max-width: var(--bn-max-panel-text);
  font-size: var(--bn-fs-body-s);
  line-height: var(--bn-lh-body-s);
  color: var(--bn-ink-2);
}
.bn-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 24px; }
.bn-panel--bottom > .bn-panel__head { margin-top: auto; margin-bottom: 0; padding-block: 48px 0; }
/* secao centrada direto no chao (conta no limite de 2 por pagina) */
.bn-panel--center {
  align-items: center; text-align: center;
  background-color: transparent; border-color: transparent;
}
.bn-panel--center > .bn-panel__head { max-width: 18ch; }
@media (max-width: 767.98px) {
  .bn-panel--text > .bn-panel__head { margin-block: 40px 24px; padding-block: 0; }
  .bn-panel--bottom > .bn-panel__head { margin-block: 40px 0; }
}

/* Painel de midia: foto low-key cobrindo o painel; tag e vidro sobrepostos */
.bn-media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 320px;
  margin: 0;
  padding: 0;
  background-color: var(--bn-panel);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-lg);
}
.bn-media > :is(img, video, picture),
.bn-media > .bn-media__fill {
  position: absolute; inset: 0; z-index: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover;
}
.bn-media > picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bn-media--16x9 { aspect-ratio: 16 / 9; min-height: 0; }
/* tratamento noturno para foto clara existente (§10) */
.bn-media--treated > :is(img, video, picture) { filter: brightness(0.82) saturate(0.92) contrast(1.04); }
.bn-media--treated::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 30% 20%, transparent 40%, hsl(var(--bn-night-hsl) / 0.55) 100%);
}
/* metadado de canto sobre foto: SEMPRE com tag (ink 9.25:1 no pior caso) */
.bn-media__tag {
  position: absolute; top: 24px; left: 24px; z-index: 2;
  padding: 4px 8px;
  border-radius: var(--bn-r-xs);
  background-color: var(--bn-tag);
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-mono-label);
  line-height: var(--bn-lh-mono-label);
  font-weight: var(--bn-fw-medium);
  letter-spacing: var(--bn-ls-mono-label);
  text-transform: uppercase;
  color: var(--bn-night-ink);
}
.bn-media__tag--br { top: auto; left: auto; right: 24px; bottom: 24px; }
.bn-media > .bn-glass {
  position: absolute; z-index: 2;
  right: clamp(24px, 2.8vw, 40px);
  bottom: clamp(24px, 2.8vw, 40px);
}
.bn-media > .bn-glass--left { right: auto; left: clamp(24px, 2.8vw, 40px); }
@media (max-width: 767.98px) {
  .bn-media { display: flex; flex-direction: column; min-height: 0; }
  .bn-media > :is(img, video, picture), .bn-media > .bn-media__fill {
    position: relative; inset: auto; height: auto; aspect-ratio: 4 / 5;
  }
  .bn-media--16x9 { aspect-ratio: auto; }
  .bn-media--16x9 > :is(img, video, picture) { aspect-ratio: 16 / 9; }
  .bn-media--treated::after { inset: 0 0 auto 0; width: 100%; aspect-ratio: 4 / 5; }
  .bn-media--16x9.bn-media--treated::after { aspect-ratio: 16 / 9; }
  /* no mobile o vidro vai para baixo da foto, sem blur, com os papeis da noite */
  .bn-media > .bn-glass, .bn-media > .bn-glass--left {
    position: static; width: auto; max-width: none;
    border: 0; border-top: 1px solid var(--bn-line); border-radius: 0;
    background-color: var(--bn-panel);
    -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: none;
  }
}

/* Folha creme: inset do gutter, raio 24 em todas as larguras. Use com .bn-surface-cream */
.bn-sheet, .bn-panel--cream {
  position: relative;
  padding: var(--bn-pad-sheet);
  background-color: var(--bn-bg);
  color: var(--bn-ink);
  border-radius: var(--bn-r-xl);
  box-shadow: inset 0 0 0 1px hsl(var(--bn-bone-hsl) / 0.04);
}
.bn-sheet__inner { max-width: var(--bn-max-text); margin-inline: auto; }
.bn-sheet__inner--form { max-width: var(--bn-max-form); }
.bn-sheet__inner--wide { max-width: var(--bn-max-sheet); }
.bn-sheet__divider {
  height: 0; margin-block: clamp(64px, 6.7vw, 96px);
  border: 0; border-top: 1px solid var(--bn-line);
}

/* Hero C (padrao de landing): 7/5, texto a esquerda + gota L a direita */
.bn-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--bn-space-7);
  padding-top: calc(var(--bn-navbar-h) + env(safe-area-inset-top) + 48px);
  padding-bottom: var(--bn-space-7);
}
.bn-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; min-width: 0; }
.bn-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.bn-hero__object { display: flex; justify-content: center; align-items: flex-end; min-width: 0; }
.bn-hero__corners { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; grid-column: 1 / -1; }
.bn-hero--center .bn-hero__copy { align-items: center; text-align: center; margin-inline: auto; }
@media (max-width: 767.98px) {
  .bn-hero__actions { width: 100%; }
  .bn-hero__actions > .bn-btn:not(.bn-btn--link) { width: 100%; }
}
@media (min-width: 1024px) {
  .bn-hero {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    min-height: min(100svh, 880px);
    padding-top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 96px);
  }
  .bn-hero__copy { grid-column: 1 / span 7; }
  .bn-hero__object { grid-column: 8 / span 5; align-self: end; }
  .bn-hero--center { grid-template-columns: minmax(0, 1fr); min-height: 100svh; align-content: start; }
  .bn-hero--center .bn-hero__copy, .bn-hero--center .bn-hero__object { grid-column: 1; }
}

/* ==========================================================================
   4. NAV flutuante (desktop) + barra mobile (< 1024px) + menu tela cheia
   Markup: <header class="bn-nav bn-surface-night"> brand · ul.bn-nav__pill · .bn-nav__actions
   ========================================================================== */
.bn-nav {
  position: fixed;
  z-index: var(--bn-z-nav);
  top: var(--bn-nav-top);
  left: max(var(--bn-gutter), calc((100vw - var(--bn-max-panels)) / 2 + var(--bn-gutter)));
  right: max(var(--bn-gutter), calc((100vw - var(--bn-max-panels)) / 2 + var(--bn-gutter)));
  height: var(--bn-nav-h);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 0;
  color: var(--bn-ink);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--bn-r-lg);
  transition:
    transform var(--bn-dur-short) var(--bn-ease-soft),
    background-color var(--bn-dur-short) var(--bn-ease-soft),
    border-color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-nav__brand {
  justify-self: start;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 2px;
  border-radius: var(--bn-r-xs);
  color: inherit; text-decoration: none;
}
.bn-nav__brand img, .bn-logo { display: block; height: var(--bn-wordmark-h); width: auto; max-width: none; }
.bn-nav__pill {
  justify-self: center;
  display: flex; align-items: center; gap: 2px;
  height: var(--bn-nav-pill-h);
  margin: 0; padding: 3px;
  list-style: none;
  background-color: var(--bn-panel-2);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-md);
}
.bn-nav__pill > li { display: flex; }
.bn-nav__link {
  position: relative;
  display: inline-flex; align-items: center;
  height: 36px; padding: 0 14px;
  border-radius: var(--bn-r-sm);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-small);
  font-weight: var(--bn-fw-medium);
  line-height: 1;
  color: var(--bn-ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--bn-dur-short) var(--bn-ease-soft), background-color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-nav__link:hover { color: var(--bn-ink); background-color: var(--bn-hover); }
.bn-nav__link[aria-current="page"] { color: var(--bn-ink); background-color: hsl(var(--bn-ink-hsl) / 0.08); }
.bn-nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 4px;
  width: 16px; height: 2px; margin-left: -8px;
  border-radius: var(--bn-r-pill);
  background-color: var(--bn-ink);
}
.bn-nav__actions { justify-self: end; display: flex; align-items: center; gap: 8px; }
.bn-nav__toggle {
  position: relative;
  display: none;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--bn-r-sm);
  background: transparent; color: var(--bn-ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bn-nav__toggle-line {
  position: absolute; left: 10px;
  width: 24px; height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transition: transform var(--bn-dur-short) var(--bn-ease-out);
}
.bn-nav__toggle-line:first-child { top: 17px; }
.bn-nav__toggle-line:last-child { top: 25px; }
.bn-nav__toggle[aria-expanded="true"] .bn-nav__toggle-line:first-child { transform: translateY(4px) rotate(45deg); }
.bn-nav__toggle[aria-expanded="true"] .bn-nav__toggle-line:last-child { transform: translateY(-4px) rotate(-45deg); }

/* rolagem > 24px: barra de vidro noturno (legivel sobre o creme) */
.bn-nav--scrolled {
  transform: translateY(calc(var(--bn-nav-top-scrolled) - var(--bn-nav-top)));
  padding: 6px 6px 6px 20px;
  background-color: var(--bn-scrim);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-color: var(--bn-line);
}
.bn-nav--scrolled .bn-nav__pill { border-color: transparent; }

@media (max-width: 1023.98px) {
  .bn-nav {
    top: 0;
    left: var(--bn-gutter); right: var(--bn-gutter);
    height: calc(var(--bn-navbar-h) + env(safe-area-inset-top));
    grid-template-columns: minmax(0, 1fr) auto;
    padding: env(safe-area-inset-top) 4px 0 16px;
    background-color: var(--bn-panel-2);
    border: 0;
    border-radius: 0 0 var(--bn-r-md) var(--bn-r-md);
  }
  .bn-nav__brand img, .bn-nav .bn-logo { height: var(--bn-wordmark-h-sm); }
  .bn-nav__pill, .bn-nav .bn-nav__cta { display: none; }   /* (0,2,0): vence o display do .bn-btn */
  .bn-nav__toggle { display: inline-block; }
  .bn-nav--scrolled {
    transform: none;
    padding: env(safe-area-inset-top) 4px 0 16px;
    background-color: var(--bn-scrim);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
}

.bn-menu {
  position: fixed; inset: 0; z-index: var(--bn-z-menu);
  display: none;
  flex-direction: column;
  padding: calc(var(--bn-navbar-h) + env(safe-area-inset-top) + 32px) var(--bn-gutter) calc(24px + env(safe-area-inset-bottom));
  overflow-y: auto;
  background-color: var(--bn-night);
  color: var(--bn-night-ink);
}
.bn-menu.is-open, .bn-menu:target { display: flex; }
.bn-menu__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.bn-menu__link {
  display: inline-block;
  padding-block: 4px;
  font-family: var(--bn-font-display);
  font-weight: var(--bn-fw-display);
  font-size: var(--bn-fs-display-m);
  line-height: var(--bn-lh-display-m);
  letter-spacing: var(--bn-ls-display-m);
  color: var(--bn-ink);
  text-decoration: none;
}
.bn-menu__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.bn-menu__footer { margin-top: auto; padding-top: 32px; }
.bn-menu__footer .bn-btn { width: 100%; }
html.bn-menu-open, html.bn-menu-open body { overflow: hidden; }
html.bn-menu-open .bn-nav { z-index: calc(var(--bn-z-menu) + 1); }
@media (min-width: 1024px) { .bn-menu, .bn-menu.is-open, .bn-menu:target { display: none; } }

/* ==========================================================================
   5. BOTOES
   ========================================================================== */
.bn-btn {
  --bn-btn-h: var(--bn-btn-h-md);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--bn-btn-h);
  margin: 0; padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--bn-r-sm);
  background-color: var(--bn-cta-bg);
  color: var(--bn-cta-ink);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-body-s);
  font-weight: var(--bn-fw-medium);
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--bn-dur-short) var(--bn-ease-soft),
    color var(--bn-dur-short) var(--bn-ease-soft),
    border-color var(--bn-dur-short) var(--bn-ease-soft),
    text-decoration-color var(--bn-dur-short) var(--bn-ease-soft),
    transform var(--bn-dur-micro) var(--bn-ease-soft);
}
.bn-btn:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--bn-cta-bg-hover); }
.bn-btn:not(:disabled, [aria-disabled="true"]):active { transform: scale(0.98); }

.bn-btn--sm { --bn-btn-h: var(--bn-btn-h-sm); padding: 0 16px; font-size: var(--bn-fs-small); }
.bn-btn--nav { --bn-btn-h: var(--bn-btn-h-nav); padding: 0 18px; font-size: var(--bn-fs-small); }
.bn-btn--md { --bn-btn-h: var(--bn-btn-h-md); padding: 0 20px; font-size: var(--bn-fs-body-s); }
.bn-btn--lg { --bn-btn-h: var(--bn-btn-h-lg); padding: 0 28px; font-size: var(--bn-fs-body); }
.bn-btn--block { display: flex; width: 100%; }
.bn-btn--icon { width: var(--bn-btn-h); padding: 0; }

/* primary = CTA do escopo (bone na noite / forest no creme). Aliases: --primary, --cta */
.bn-btn--primary, .bn-btn--cta { background-color: var(--bn-cta-bg); color: var(--bn-cta-ink); }
.bn-btn--primary:not(:disabled, [aria-disabled="true"]):hover,
.bn-btn--cta:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--bn-cta-bg-hover); }

/* forest explicito: para o creme ou etiqueta; na noite prefira --primary (bone) */
.bn-btn--forest { background-color: var(--bn-forest); color: var(--bn-bone); }
.bn-btn--forest:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--bn-forest-deep); }

.bn-btn--secondary { background-color: transparent; color: var(--bn-ink); border-color: var(--bn-line-strong); }
.bn-btn--secondary:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--bn-hover); }

.bn-btn--ghost { background-color: transparent; color: var(--bn-ink-2); }
.bn-btn--ghost:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--bn-hover); color: var(--bn-ink); }

/* terracotta: A acao de maior valor (resgate/promo). 1 por pagina. Texto night (4.93:1) */
.bn-btn--accent { background-color: var(--bn-cta-accent-bg); color: var(--bn-cta-accent-ink); }
.bn-btn--accent:not(:disabled, [aria-disabled="true"]):hover { background-color: var(--bn-cta-accent-bg-hover); }

.bn-btn--link {
  height: auto; min-height: 24px; padding: 0;
  background-color: transparent; color: var(--bn-link);
  border: 0; border-radius: 2px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--bn-link-underline);
  text-underline-offset: 4px;
}
.bn-btn--link:not(:disabled, [aria-disabled="true"]):hover { background-color: transparent; text-decoration-color: currentColor; }
.bn-btn--link:not(:disabled, [aria-disabled="true"]):active { transform: none; }

.bn-btn:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; }
.bn-btn svg:not(.bn-drop), .bn-btn__icon { width: 16px; height: 16px; flex: none; }
.bn-btn .bn-drop, .bn-btn__drop { height: 13px; }
.bn-btn[aria-busy="true"] { cursor: progress; }

.bn-spinner {
  display: inline-block; flex: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%;
  opacity: 0.8;
  animation: bn-spin 800ms linear infinite;
}
@keyframes bn-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   6. CHIP
   ========================================================================== */
.bn-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: var(--bn-chip-h-md);
  margin: 0; padding: 0 14px;
  vertical-align: middle;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-sm);
  background-color: var(--bn-panel-2);
  color: var(--bn-ink);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-small);
  font-weight: var(--bn-fw-medium);
  line-height: 1;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.bn-chip:has(> :is(.bn-chip__dot, .bn-chip__icon, .bn-drop, svg):first-child) { padding-left: 10px; }
.bn-chip__dot { width: 8px; height: 8px; flex: none; border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }
.bn-chip__dot--promo { background-color: var(--bn-terracotta); }
.bn-chip svg:not(.bn-drop), .bn-chip__icon { width: 16px; height: 16px; flex: none; }
.bn-chip .bn-drop { height: 20px; }

.bn-chip--sm { height: var(--bn-chip-h-sm); gap: 6px; padding: 0 10px; font-size: var(--bn-fs-caption); }
.bn-chip--sm:has(> :is(.bn-chip__dot, .bn-chip__icon, svg):first-child) { padding-left: 8px; }
.bn-chip--sm .bn-chip__dot { width: 6px; height: 6px; }
.bn-chip--lg { height: var(--bn-chip-h-lg); gap: 10px; padding: 0 18px; }
.bn-chip--lg:has(> :is(.bn-chip__dot, .bn-chip__icon, .bn-drop, svg):first-child) { padding-left: 12px; }
.bn-chip--lg svg:not(.bn-drop), .bn-chip--lg .bn-chip__icon { width: 20px; height: 20px; }
.bn-chip--lg .bn-drop { height: 32px; }
/* acima de headline (EQUA) */
.bn-chip--lead { margin-bottom: 20px; }
/* chip preenchido de promo (quando o contexto exige): texto night sobre terracotta */
.bn-chip--promo-filled { background-color: var(--bn-terracotta); border-color: transparent; color: var(--bn-night); }

button.bn-chip { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color var(--bn-dur-short) var(--bn-ease-soft), border-color var(--bn-dur-short) var(--bn-ease-soft); }
button.bn-chip:not([aria-pressed="true"]):hover { background-image: linear-gradient(var(--bn-hover), var(--bn-hover)); }
.bn-chip[aria-pressed="true"] { border-color: hsl(var(--bn-tone-hsl) / 0.6); background-color: hsl(var(--bn-tone-hsl) / 0.12); }

/* ==========================================================================
   7. CARD / GLOW CARD (campo de cor de colecao no canto)
   <a class="bn-card" data-col="calma" data-glow="hero" data-glow-at="br">
   ========================================================================== */
.bn-card, .bn-glow-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 16px;
  min-height: var(--bn-card-min-h);
  padding: var(--bn-pad-card);
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-md);
  text-decoration: none;
  transition:
    --bn-glow-boost var(--bn-dur-medium) var(--bn-ease-out),
    transform var(--bn-dur-medium) var(--bn-ease-out),
    border-color var(--bn-dur-medium) var(--bn-ease-out);
}
.bn-card--lg { border-radius: var(--bn-r-lg); }          /* bento grande (span 8) */

/* Campo: base saturada da colecao x forca (superficie) x nivel (card) x boost (estado) */
.bn-card:is([data-col], [data-glow])::before,
.bn-glow-card::before,
.bn-dial::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  --bn-field-a: calc(var(--bn-field-alpha) * var(--bn-glow-strength) * var(--bn-glow-level) * var(--bn-glow-boost));
  background: radial-gradient(80% 120% at var(--bn-glow-at),
    hsl(var(--bn-field-hsl) / var(--bn-field-a)) 0%,
    hsl(var(--bn-field-hsl) / calc(var(--bn-field-a) * 0.643)) 38%,
    transparent 78%);
}
/* card de produto e card "flat": sem campo, mesmo com data-col (o dot usa o tom) */
.bn-card.bn-card--product::before, .bn-card.bn-card--flat::before { content: none; }
:is(a, button):is(.bn-card, .bn-glow-card) { cursor: pointer; }
:is(a, button):is(.bn-card:is([data-col], [data-glow]), .bn-glow-card):not([data-glow-at="r"]):hover {
  --bn-glow-boost: var(--bn-glow-boost-hover);
}
:is(a, button):is(.bn-card, .bn-glow-card):hover {
  transform: translateY(-2px);
  border-color: hsl(var(--bn-line-strong-hsl) / 0.4);
}
button:is(.bn-card, .bn-glow-card) { width: 100%; font: inherit; text-align: left; }

.bn-card__label { grid-column: 1; grid-row: 1; margin: 0; font-family: var(--bn-font-display); font-weight: 600; font-size: var(--bn-fs-title-s); line-height: var(--bn-lh-title-s); letter-spacing: var(--bn-ls-title-s); color: var(--bn-ink); }
.bn-card__kicker { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); color: var(--bn-tone-text); }
.bn-card__kicker::before { content: ""; width: 6px; height: 6px; border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }
.bn-card__body { grid-column: 1; grid-row: 2; align-self: center; margin: 12px 0 0; font-size: var(--bn-fs-body-s); line-height: var(--bn-lh-body-s); color: var(--bn-ink-2); }
.bn-card__desc { grid-column: 1; grid-row: 3; align-self: end; max-width: 22ch; margin: 16px 0 0; font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); color: var(--bn-ink-2); }
.bn-card__ring { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; }
.bn-card__visual { grid-column: 2; grid-row: 1 / 4; align-self: center; justify-self: end; }
.bn-card__tag { position: absolute; top: var(--bn-pad-card); right: var(--bn-pad-card); }
.bn-card:has(.bn-card__tag) .bn-card__ring { margin-top: 20px; }
@container (max-width: 400px) {
  .bn-card__ring .bn-ring-wrap { --bn-ring-size: var(--bn-ring-card-sm); }
  .bn-card__ring .bn-ring__num { font-size: var(--bn-fs-ring-num-sm); }
}
@media (max-width: 767.98px) {
  .bn-card, .bn-glow-card { min-height: var(--bn-card-min-h-sm); }
  .bn-card__ring .bn-ring-wrap { --bn-ring-size: var(--bn-ring-card-sm); }
  .bn-card__ring .bn-ring__num { font-size: var(--bn-fs-ring-num-sm); }
}

/* Card de produto (PLP): sem campo, recorte sobre caustica ambar */
.bn-card--product { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.bn-card__media {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 4 / 5;
  margin: calc(var(--bn-pad-card) * -1) calc(var(--bn-pad-card) * -1) 8px;
  padding: 24px 24px 18%;
  background:
    radial-gradient(34% 5% at 50% 86%, hsl(0 0% 0% / 0.5), transparent 100%),
    radial-gradient(60% 16% at 52% 88%, hsl(var(--bn-amber-300-hsl) / 0.35), transparent 70%);
}
.bn-card__media img { display: block; width: auto; max-width: 78%; height: auto; max-height: min(280px, 100%); object-fit: contain; }
.bn-card__title { display: flex; align-items: center; gap: 8px; margin: 0; font-family: var(--bn-font-display); font-weight: 600; font-size: var(--bn-fs-title-s); line-height: var(--bn-lh-title-s); letter-spacing: var(--bn-ls-title-s); }
.bn-card__title::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }
.bn-card__title a { color: inherit; text-decoration: none; }
.bn-card__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bn-card__title a:focus-visible { outline: 2px solid var(--bn-focus); outline-offset: 2px; border-radius: 2px; }
.bn-card__sub { margin: 0; font-size: var(--bn-fs-small); line-height: var(--bn-lh-small); color: var(--bn-ink-2); }
.bn-card__price { margin: 4px 0 0; font-size: var(--bn-fs-body); line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bn-ink); }
.bn-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 8px; }

/* Card de opcao (quiz, formulario conversacional) */
.bn-choice {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 56px;
  margin: 0; padding: 14px 16px;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-md);
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-body-s);
  font-weight: var(--bn-fw-medium);
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--bn-dur-short) var(--bn-ease-soft), border-color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-choice:hover { background-image: linear-gradient(var(--bn-hover), var(--bn-hover)); }
.bn-choice__check { width: 16px; height: 16px; margin-left: auto; flex: none; visibility: hidden; }
.bn-choice:is([aria-checked="true"], [aria-pressed="true"]) { border-color: var(--bn-line-strong); background-color: hsl(var(--bn-tone-hsl) / 0.16); }
.bn-choice:is([aria-checked="true"], [aria-pressed="true"]) .bn-choice__check { visibility: visible; }
.bn-surface-cream .bn-choice { min-height: 64px; }
.bn-surface-cream .bn-choice:is([aria-checked="true"], [aria-pressed="true"]) {
  border-color: var(--bn-tone-neutral);
  box-shadow: inset 0 0 0 1px var(--bn-tone-neutral);
  background-color: var(--bn-panel);
}

/* ==========================================================================
   8. ANEL DE PROGRESSO (SVG viewBox 0 0 120 120, r 52, stroke 8)
   Camadas: __track, __bloom (filtro SVG), __arc (gradiente), __core (so noite)
   ========================================================================== */
.bn-ring-wrap {
  --bn-ring-size: var(--bn-ring-card);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--bn-ring-size);
  height: var(--bn-ring-size);
  vertical-align: middle;
}
.bn-ring-wrap--sm { --bn-ring-size: var(--bn-ring-card-sm); }
.bn-ring-wrap--mini { --bn-ring-size: var(--bn-ring-mini); }
.bn-ring-wrap--quiz { --bn-ring-size: 56px; }
.bn-ring-wrap--hero { --bn-ring-size: clamp(var(--bn-ring-hero-min), 30vw, var(--bn-ring-hero-max)); max-width: 100%; }
.bn-ring {
  display: block;
  width: var(--bn-ring-size, var(--bn-ring-card));
  height: var(--bn-ring-size, var(--bn-ring-card));
  overflow: visible;
}
.bn-ring-wrap > .bn-ring { width: 100%; height: 100%; }
.bn-ring__track { fill: none; stroke: var(--bn-tone); stroke-opacity: var(--bn-ring-track-alpha); }
.bn-ring__bloom { fill: none; stroke: var(--bn-tone); opacity: calc(var(--bn-ring-bloom) * var(--bn-ring-glow)); }
.bn-ring__arc { fill: none; }
.bn-ring__core {
  fill: none;
  stroke: color-mix(in oklab, var(--bn-tone) 55%, var(--bn-amber-specular));
  opacity: calc(0.8 * var(--bn-ring-glow));
}
.bn-ring.is-drawing :is(.bn-ring__arc, .bn-ring__bloom, .bn-ring__core),
.bn-dial__svg.is-drawing :is(.bn-dial__arc, .bn-dial__bloom, .bn-dial__core) {
  transition: stroke-dasharray var(--bn-dur-ring) var(--bn-ease-out);
  transition-delay: var(--bn-ring-delay, 0ms);
}
/* texto interno: coluna alinhada a direita a 24% do diametro (mostrador de relogio) */
.bn-ring__text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  gap: 2px;
  padding-right: 24%;
  text-align: right;
  pointer-events: none;
}
.bn-ring__cap {
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-ring-cap);
  line-height: 1.2;
  font-weight: var(--bn-fw-medium);
  letter-spacing: 0.02em;
  color: var(--bn-ink);           /* sempre ink (ink-2 sobre o campo falha) */
  white-space: nowrap;
}
.bn-ring__num {
  font-family: var(--bn-font-display);
  font-size: var(--bn-fs-ring-num);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--bn-ink);
}
.bn-ring-wrap--sm .bn-ring__num { font-size: var(--bn-fs-ring-num-sm); }
.bn-ring-wrap--mini .bn-ring__text, .bn-ring-wrap--quiz .bn-ring__text { display: none; }
.bn-ring-wrap--hero .bn-ring__num { font-size: var(--bn-fs-panel-head); }

/* ==========================================================================
   9. DIAL DE CICLO (painel com campo no centro, anel r72, marcas em textPath)
   ========================================================================== */
.bn-dial {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
  padding: var(--bn-pad-panel);
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-lg);
}
.bn-dial__tag { position: absolute; top: var(--bn-pad-card); right: var(--bn-pad-card); }
.bn-dial__figure {
  position: relative;
  width: clamp(var(--bn-ring-hero-min), 70cqi, var(--bn-ring-hero-max));
  max-width: 100%;
  aspect-ratio: 1;
}
.bn-dial__svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bn-dial__track { fill: none; stroke: var(--bn-tone); stroke-opacity: var(--bn-ring-track-alpha); }
.bn-dial__bloom { fill: none; stroke: var(--bn-tone); opacity: calc(var(--bn-ring-bloom) * var(--bn-ring-glow)); }
.bn-dial__arc { fill: none; }
.bn-dial__core { fill: none; stroke: color-mix(in oklab, var(--bn-tone) 55%, var(--bn-amber-specular)); opacity: calc(0.8 * var(--bn-ring-glow)); }
.bn-dial__ticks {
  font-family: var(--bn-font-mono);
  font-size: 8px;                 /* unidades do viewBox 200: >= 11px renderizado a partir de 280px */
  font-weight: 500;
  letter-spacing: 0.02em;
  fill: var(--bn-ink);            /* marcas ficam sobre o campo: ink, nunca ink-2 */
}
.bn-dial__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding-bottom: 16%;            /* sobe o valor para o lockup caber dentro do anel */
  pointer-events: none;
}
.bn-dial__value {
  font-family: var(--bn-font-display);
  font-weight: 600;
  font-size: var(--bn-fs-panel-head);
  line-height: 1;
  letter-spacing: var(--bn-ls-panel-head);
  font-variant-numeric: tabular-nums;
  color: var(--bn-ink);
}
.bn-dial__lockup {
  position: absolute; top: 60%; left: 50%;
  transform: translateX(-50%);
  align-items: center; text-align: center;
  white-space: nowrap;
  pointer-events: none;
}
.bn-dial__lockup .bn-mono-label { color: var(--bn-ink); }

/* ==========================================================================
   10. GOTA DE OLEO EM VIDRO AMBAR (SVG; LOD L/M/S/XS; tamanho por --bn-drop-h)
   ========================================================================== */
.bn-drop {
  display: block;
  flex: none;
  height: var(--bn-drop-h, 360px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 280 / 320;
  overflow: visible;
}
.bn-drop--l { aspect-ratio: 280 / 320; }
.bn-drop--m { --bn-drop-h: 64px; aspect-ratio: 212 / 272; }
.bn-drop--s { --bn-drop-h: 32px; aspect-ratio: 216 / 276; }
.bn-drop--xs { --bn-drop-h: 13px; aspect-ratio: 200 / 260; }
/* tamanhos de uso (spec §8.8) */
.bn-drop--hero { --bn-drop-h: clamp(280px, 29vw, 420px); }
.bn-drop--section { --bn-drop-h: clamp(280px, 25vw, 360px); }
.bn-drop--cta { --bn-drop-h: clamp(280px, 25vw, 360px); }
.bn-drop--empty { --bn-drop-h: 200px; }
.bn-drop--orb { --bn-drop-h: 60px; }
.bn-drop--tabbar { --bn-drop-h: 52px; }
.bn-drop--chat { --bn-drop-h: 40px; }
.bn-drop--chip { --bn-drop-h: 32px; }
.bn-drop--avatar { --bn-drop-h: 32px; }
.bn-drop--bullet { --bn-drop-h: 18px; }
.bn-drop--button { --bn-drop-h: 13px; }
@media (max-width: 767.98px) {
  .bn-drop--hero, .bn-drop--section { --bn-drop-h: 200px; }
  .bn-drop--cta, .bn-drop--empty { --bn-drop-h: 160px; }
}

.bn-drop__halo { opacity: var(--bn-drop-halo-alpha); }
.bn-drop__caustic { opacity: var(--bn-drop-caustic-alpha); }
.bn-drop__shadow { fill: var(--bn-drop-shadow); }
.bn-drop__thick { fill: none; stroke: var(--bn-amber-900); stroke-width: 18; opacity: 0.5; }
.bn-drop__band { fill: none; stroke: var(--bn-amber-200); stroke-width: 20; opacity: 0.35; }
.bn-drop__exit { fill: none; stroke: var(--bn-amber-200); stroke-width: 3; stroke-linecap: round; opacity: 0.55; }
.bn-drop__bubbles { fill: var(--bn-amber-50); }
.bn-drop__rim { fill: none; stroke-width: 2; stroke-linecap: round; }
.bn-drop--m .bn-drop__rim { stroke-width: 5; }
.bn-drop--s .bn-drop__rim { stroke: var(--bn-amber-rim); stroke-opacity: 0.7; stroke-width: 10; }
.bn-drop__spec { opacity: 0.75; }
.bn-drop--m .bn-drop__spec { opacity: 0.8; }
.bn-drop__window { fill: var(--bn-amber-specular); opacity: 0.7; }
.bn-drop--m .bn-drop__window { opacity: 0.6; }
.bn-drop__crescent { fill: var(--bn-amber-specular); opacity: 0.85; }

/* movimento ambiente (so LOD L, uma por viewport): corpo flutua, chao respira */
.bn-drop--float .bn-drop__body {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation:
    bn-drop-bob var(--bn-dur-drop-float) var(--bn-ease-float) infinite,
    bn-drop-sway var(--bn-dur-drop-float) var(--bn-ease-float) infinite;
}
.bn-drop--float .bn-drop__ground {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: bn-drop-ground var(--bn-dur-drop-float) var(--bn-ease-float) infinite;
}
@keyframes bn-drop-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--bn-drop-float-y); } }
@keyframes bn-drop-sway { 0%, 50%, 100% { rotate: 0deg; } 25% { rotate: -1.5deg; } 75% { rotate: 1.5deg; } }
@keyframes bn-drop-ground { 0%, 100% { scale: 1 1; opacity: 1; } 50% { scale: 0.9 1; opacity: 0.75; } }

/* Orb da Liz: botao com gota M */
.bn-orb {
  display: inline-grid; place-items: center;
  width: var(--bn-orb); height: var(--bn-orb);
  margin: 0; padding: 0;
  border: 0; border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    filter var(--bn-dur-medium) var(--bn-ease-soft),
    box-shadow var(--bn-dur-medium) var(--bn-ease-soft),
    opacity var(--bn-dur-short) var(--bn-ease-soft),
    transform var(--bn-dur-micro) var(--bn-ease-soft);
}
.bn-orb .bn-drop { --bn-drop-h: calc(var(--bn-orb) - 4px); }
.bn-orb:hover { filter: brightness(1.08); box-shadow: var(--bn-glow-shadow-amber); }
.bn-orb:active { transform: scale(0.96); }
.bn-orb--tabbar { width: var(--bn-orb-tabbar); height: var(--bn-orb-tabbar); }
.bn-orb--tabbar .bn-drop { --bn-drop-h: calc(var(--bn-orb-tabbar) - 4px); }
.bn-orb--fixed {
  position: fixed; z-index: var(--bn-z-chat);
  right: var(--bn-gutter);
  bottom: calc(var(--bn-hud-bottom) + var(--bn-bottom-bar-h) + env(safe-area-inset-bottom) + 12px + var(--bn-chat-gap));
}
html.bn-menu-open .bn-orb--fixed { opacity: 0; pointer-events: none; }
/* "pensando" */
.bn-orb[aria-busy="true"] .bn-drop__rim { animation: bn-orb-rim 1600ms var(--bn-ease-float) infinite alternate; }
.bn-orb[aria-busy="true"] .bn-drop__spec { transform-box: fill-box; transform-origin: 50% 50%; animation: bn-orb-spec 1600ms var(--bn-ease-float) infinite alternate; }
@keyframes bn-orb-rim { from { opacity: 0.6; } to { opacity: 1; } }
@keyframes bn-orb-spec { from { rotate: -8deg; } to { rotate: 8deg; } }

/* ==========================================================================
   11. HUD fixo · "Ronronar 25 Hz" (esq) + "Tempo de cuidado 3 min" (dir)
   Decorativo: aria-hidden no container. Nunca associado a produto/efeito (§8.9).
   ========================================================================== */
.bn-hud { --bn-hud-amp: 0; }
.bn-hud__left, .bn-hud__right {
  --bn-hud-wave-base: var(--bn-ink-2);
  --bn-hud-wave-peak: var(--bn-amber-300);
  position: fixed;
  z-index: var(--bn-z-hud);
  bottom: calc(var(--bn-hud-bottom) + var(--bn-bottom-bar-h) + env(safe-area-inset-bottom));
  margin: 0;
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-hud);
  line-height: 1;
  letter-spacing: var(--bn-ls-hud);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--bn-ink-2);
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
  transition: opacity var(--bn-dur-short) var(--bn-ease-soft), color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-hud__left { left: var(--bn-gutter); }
.bn-hud__right { right: var(--bn-gutter); }
.bn-hud__value { font-weight: 500; color: var(--bn-ink); transition: color var(--bn-dur-short) var(--bn-ease-soft); }
.bn-hud__wave {
  display: inline-block;
  width: 20px; height: 12px;
  margin-left: 6px;
  vertical-align: -2px;
  overflow: visible;
  clip-path: inset(-8px 0);
  color: color-mix(in oklab, var(--bn-hud-wave-base), var(--bn-hud-wave-peak) calc(var(--bn-hud-amp) * 100%));
}
.bn-hud__wave path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: view-box;
  transform-origin: 50% 50%;
  transform: scale(calc(1 - 0.3 * var(--bn-hud-amp)), calc(1 + 0.8 * var(--bn-hud-amp)));
}
.bn-hud.is-hidden :is(.bn-hud__left, .bn-hud__right),
html.bn-menu-open .bn-hud :is(.bn-hud__left, .bn-hud__right) { opacity: 0; }
.bn-hud.is-absorbed :is(.bn-hud__left, .bn-hud__right) { opacity: 0; transition-duration: var(--bn-dur-medium); }
/* HUD sobre painel de marca ou campo de glow (JS/React marcam --on-ink): o rotulo vira ink.
   ink-2 mede 4.06:1 no forest-deep e 3.3-4.3:1 sobre o campo do card. Fica ANTES do creme:
   se as duas classes coexistirem, o creme vence. */
.bn-hud__left--on-ink, .bn-hud__right--on-ink {
  --bn-hud-wave-base: var(--bn-night-ink);
  color: var(--bn-night-ink);
}
/* HUD sobre folha creme (cada lado testado separadamente pelo JS) */
.bn-hud__left--on-cream, .bn-hud__right--on-cream {
  --bn-hud-wave-base: var(--bn-deep-barriga);
  --bn-hud-wave-peak: var(--bn-deep-barriga);
  color: var(--bn-mute-deep);
}
:is(.bn-hud__left--on-cream, .bn-hud__right--on-cream) .bn-hud__value { color: var(--bn-charcoal); }
@media (max-width: 479.98px) { .bn-hud__left, .bn-hud__right { font-size: var(--bn-fs-hud-sm); } }
/* Mobile (<768px): o texto corrido passa por baixo do HUD o tempo todo. Cada lado vira uma
   ficha de vidro noturno (mesmo scrim da barra do topo), entao HUD nunca colide letra com
   letra; a cor fica fixa na noite (ink-2 sobre scrim mede 5.06:1 no pior caso, sobre creme). */
@media (max-width: 767.98px) {
  .bn-hud__left, .bn-hud__right {
    padding: 7px 10px;
    border-radius: var(--bn-r-sm);
    background-color: var(--bn-night-scrim);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    backdrop-filter: blur(12px) saturate(1.2);
    box-shadow: inset 0 0 0 1px var(--bn-night-line);
  }
  .bn-hud__left--on-ink, .bn-hud__right--on-ink,
  .bn-hud__left--on-cream, .bn-hud__right--on-cream {
    --bn-hud-wave-base: var(--bn-night-ink-2);
    --bn-hud-wave-peak: var(--bn-amber-300);
    color: var(--bn-night-ink-2);
  }
  :is(.bn-hud__left--on-ink, .bn-hud__right--on-ink, .bn-hud__left--on-cream, .bn-hud__right--on-cream) .bn-hud__value { color: var(--bn-night-ink); }
}
@media print { .bn-hud, .bn-orb--fixed, .bn-nav, .bn-menu { display: none !important; } }

/* ==========================================================================
   12. FICHA (stat / "laudo") — so fatos reais
   ========================================================================== */
.bn-ficha, .bn-stat {
  position: relative;
  container-type: inline-size;
  display: flex; flex-direction: column;
  min-height: 240px;
  padding: 32px;
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-md);
}
.bn-ficha--lg, .bn-stat--lg { border-radius: var(--bn-r-lg); }
.bn-ficha__lockup, .bn-stat__lockup { margin-bottom: 32px; }
.bn-ficha__value, .bn-stat__value {
  margin: auto 0 0;
  font-family: var(--bn-font-display);
  font-weight: 600;
  font-size: var(--bn-fs-stat);
  line-height: 0.96;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--bn-ink);
}
.bn-ficha__value--word, .bn-stat__value--word {
  font-size: var(--bn-fs-stat-word);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: normal;
  -webkit-hyphens: manual;
  hyphens: manual;
}
.bn-ficha__caption, .bn-stat__caption {
  max-width: 28ch;
  margin: 16px 0 0;
  font-size: var(--bn-fs-body-s);
  line-height: var(--bn-lh-body-s);
  color: var(--bn-ink-2);
}
.bn-ficha__source, .bn-stat__source { align-self: flex-end; margin-top: 16px; }
@media (max-width: 767.98px) {
  .bn-ficha, .bn-stat { padding: 24px; min-height: 200px; }
  .bn-ficha__source, .bn-stat__source { align-self: flex-start; }
}

/* ==========================================================================
   13. LINHA DE LISTA (tile 40 · titulo/subtitulo · valor · chevron · hairline)
   ========================================================================== */
/* a lista sangra 8px para os lados: o hover da linha interativa cabe sem estourar o <li> */
.bn-list { margin: 0 -8px; padding: 0; list-style: none; }
.bn-list > li { position: relative; }
.bn-list > li + li::before {
  content: ""; position: absolute; top: 0; left: 8px; right: 8px;
  height: 1px; background-color: var(--bn-line); pointer-events: none;
}
.bn-list .bn-list-row { padding-inline: 8px; }
.bn-list-row + .bn-list-row { border-top: 1px solid var(--bn-line); }
.bn-list__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 32px;
}
.bn-list__meta { font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); color: var(--bn-ink-2); }
.bn-list-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  min-height: var(--bn-row-h);
  margin: 0;
  padding: 12px 0;
  background: transparent;
  border: 0;
  color: var(--bn-ink);
  font: inherit;
  text-align: left;
  text-decoration: none;
}
.bn-list-row__tile {
  display: grid; place-items: center;
  flex: none;
  width: var(--bn-tile); height: var(--bn-tile);
  overflow: hidden;
  border-radius: var(--bn-r-md);
  background-color: var(--bn-panel-2);
  color: var(--bn-tone);
}
:where(.bn-list-row:not([data-col])) .bn-list-row__tile:not([data-col]) { color: var(--bn-ink-2); }
.bn-list-row__tile svg:not(.bn-ring):not(.bn-drop) { width: 20px; height: 20px; }
.bn-list-row__tile img { width: 100%; height: 100%; object-fit: cover; }
.bn-list-row__tile--plain { background-color: transparent; }
.bn-list-row__tile--date {
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  font-family: var(--bn-font-mono); font-size: var(--bn-fs-mono-label); line-height: 1.1;
  font-weight: 500; letter-spacing: var(--bn-ls-mono-label); text-transform: uppercase;
  color: var(--bn-ink);
}
.bn-list-row__tile--year { width: 56px; background: transparent; justify-items: start; color: var(--bn-ink-2); font-family: var(--bn-font-mono); font-size: var(--bn-fs-mono-label); font-weight: 500; letter-spacing: var(--bn-ls-mono-label); }
.bn-list-row__text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.bn-list-row__title { font-size: var(--bn-fs-body); line-height: 1.35; font-weight: var(--bn-fw-medium); color: var(--bn-ink); }
.bn-list-row__subtitle { font-size: var(--bn-fs-small); line-height: 1.4; color: var(--bn-ink-2); }
.bn-list-row__end { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; text-align: right; }
.bn-list-row__value { font-size: var(--bn-fs-body-s); line-height: 1.3; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bn-ink); white-space: nowrap; }
.bn-list-row__value-sub { font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); font-variant-numeric: tabular-nums; color: var(--bn-ink-2); white-space: nowrap; }
.bn-list-row__chevron { width: 16px; height: 16px; flex: none; color: var(--bn-ink-3); }
:is(a, button).bn-list-row {
  border-radius: var(--bn-r-md);
  cursor: pointer;
  transition: background-color var(--bn-dur-short) var(--bn-ease-soft);
}
:is(a, button).bn-list-row:hover { background-color: var(--bn-hover); }

/* ==========================================================================
   14. BARRA SEGMENTADA
   <div class="bn-segbar" role="img" aria-label="...">
     <div class="bn-segbar__track"><span class="bn-segbar__seg" data-col="passeio" style="--bn-seg:3"></span>...</div>
     <div class="bn-segbar__labels" aria-hidden="true"><span class="bn-segbar__label" data-col="passeio" style="--bn-seg:3">Passeio</span>...</div>
   ========================================================================== */
.bn-segbar { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bn-segbar__track { display: flex; gap: 4px; height: 4px; }
.bn-segbar__seg {
  flex: var(--bn-seg, 1) 1 0;
  min-width: 4px;
  border-radius: var(--bn-r-pill);
  background-color: var(--bn-tone);
}
.bn-segbar__seg--rest { background-color: hsl(var(--bn-ink-hsl) / 0.12); }
.bn-segbar__labels { display: flex; gap: 4px; }
.bn-segbar__label {
  flex: var(--bn-seg, 1) 1 0;
  min-width: 0;
  font-size: var(--bn-fs-micro);
  line-height: var(--bn-lh-micro);
  color: var(--bn-tone-text);
  white-space: nowrap;
}
.bn-segbar__label--rest { color: var(--bn-ink-2); }
.bn-segbar__legend {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 16px;
  margin: 0; padding: 0; list-style: none;
}
.bn-segbar__legend-item { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--bn-fs-micro); line-height: var(--bn-lh-micro); color: var(--bn-ink); }
.bn-segbar__legend-item::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }
.bn-segbar__legend-value { color: var(--bn-ink-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   15. CARTAO DE VIDRO (so sobre fotografia; texto so em ink)
   ========================================================================== */
.bn-glass, .bn-glass-card {
  /* hierarquia por tamanho/peso/mono: todo texto do vidro vira ink */
  --bn-ink-2: var(--bn-ink);
  --bn-ink-3: var(--bn-ink);
  position: relative;
  container-type: inline-size;
  width: min(100%, 360px);
  padding: 20px 24px;
  background-color: var(--bn-glass);
  -webkit-backdrop-filter: var(--bn-glass-filter);
  backdrop-filter: var(--bn-glass-filter);
  border: 1px solid hsl(var(--bn-bone-hsl) / 0.12);
  border-radius: var(--bn-r-md);
  box-shadow: var(--bn-shadow-glass);
  color: var(--bn-ink);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bn-glass, .bn-glass-card { background-color: var(--bn-glass-fallback); }
}
.bn-glass__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); }
.bn-glass__mark { display: block; height: 16px; width: auto; opacity: 0.6; }
.bn-glass__col { display: inline-flex; align-items: center; gap: 6px; }
.bn-glass__col::before { content: ""; width: 8px; height: 8px; border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }
.bn-glass__close { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--bn-r-xs); background: transparent; color: var(--bn-ink); cursor: pointer; }
.bn-glass__close svg { width: 16px; height: 16px; }
.bn-glass__title { margin: 12px 0 0; font-family: var(--bn-font-display); font-weight: 600; font-size: var(--bn-fs-title-s); line-height: var(--bn-lh-title-s); letter-spacing: var(--bn-ls-title-s); }
.bn-glass__title:first-child { margin-top: 0; }
.bn-glass__rule { height: 0; margin: 12px 0; border: 0; border-top: 1px solid hsl(var(--bn-bone-hsl) / 0.1); }
.bn-glass__hero { margin: 0; font-family: var(--bn-font-display); font-weight: 600; font-size: var(--bn-fs-glass-hero); line-height: 1.02; letter-spacing: -0.03em; text-wrap: balance; }
.bn-glass__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.bn-glass__fields > div { min-width: 0; }
.bn-glass__fields dt { font-family: var(--bn-font-mono); font-size: var(--bn-fs-mono-label); line-height: var(--bn-lh-mono-label); font-weight: 500; letter-spacing: var(--bn-ls-mono-label); text-transform: uppercase; color: var(--bn-ink); }
.bn-glass__fields dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); color: var(--bn-ink); }
.bn-glass__bar { display: block; flex-basis: 100%; max-width: 56px; height: 3px; margin-top: 0; overflow: hidden; border-radius: var(--bn-r-pill); background-color: hsl(var(--bn-ink-hsl) / 0.14); }
.bn-glass__bar > span { display: block; height: 100%; width: calc(var(--bn-bar, 0) * 100%); border-radius: inherit; background-color: var(--bn-tone); }

/* ==========================================================================
   16. METADADOS DE QUATRO CANTOS (poster / outdoor)
   ========================================================================== */
.bn-corners, .bn-corner-labels {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "tl tr" "center center" "bl br";
  container-type: inline-size;
  gap: 16px 24px;
  min-height: clamp(160px, 18vw, 280px);
  padding: clamp(20px, 2.2vw, 32px);
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-lg);
}
.bn-corners--bare { padding: 0; background: transparent; border-color: transparent; min-height: 0; }
.bn-corners__tl { grid-area: tl; justify-self: start; align-self: start; }
.bn-corners__tr { grid-area: tr; justify-self: end; align-self: start; text-align: right; }
.bn-corners__bl { grid-area: bl; justify-self: start; align-self: end; }
.bn-corners__br { grid-area: br; justify-self: end; align-self: end; text-align: right; }
.bn-corners__center { grid-area: center; align-self: center; justify-self: center; text-align: center; }
@media (max-width: 767.98px) {
  .bn-corners, .bn-corner-labels {
    grid-template-columns: auto auto;
    justify-content: center;
    gap: 8px 12px;
    min-height: 0;
    text-align: center;
  }
  .bn-corners__tl, .bn-corners__tr, .bn-corners__bl, .bn-corners__br { justify-self: center; align-self: center; text-align: center; }
}

/* ==========================================================================
   17. RODAPE com contador (frase-heroi + linha da visita)
   ========================================================================== */
.bn-footer {
  padding-block: var(--bn-section-y) 48px;
  color: var(--bn-ink);
  text-align: center;
}
.bn-footer__care {
  max-width: 18ch;
  margin: 0 auto;
  font-family: var(--bn-font-display);
  font-weight: var(--bn-fw-display);
  font-size: var(--bn-fs-display-l);
  line-height: var(--bn-lh-display-l);
  letter-spacing: var(--bn-ls-display-l);
  text-wrap: balance;
  color: var(--bn-ink);
}
.bn-footer__care:has(.bn-accent) { line-height: var(--bn-lh-display-l-accent); }
.bn-footer__care .bn-accent { white-space: nowrap; }
.bn-footer__line {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 720px;
  margin: clamp(32px, 4vw, 56px) auto 0;
}
.bn-footer__line::before {
  content: ""; position: absolute; inset: -30% 8%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, hsl(var(--bn-amber-400-hsl) / 0.1), transparent 100%);
}
.bn-footer__line svg { display: block; width: 100%; height: 64px; overflow: visible; }
.bn-footer__line-path, .bn-footer__line-glow {
  fill: none;
  stroke: var(--bn-amber-300);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.bn-footer__line-glow { stroke-width: 3; opacity: 0.5; }
.bn-footer__line-value {
  position: absolute; left: 0; top: 0;
  font-family: var(--bn-font-display); font-size: 16px; line-height: 1.2; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--bn-ink);
}
.bn-footer__line-labels { display: flex; justify-content: space-between; margin-top: 8px; }
.bn-footer__brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: clamp(56px, 6vw, 96px); }
.bn-footer__brand img, .bn-footer__brand .bn-logo { height: var(--bn-wordmark-h-footer); width: auto; }
.bn-footer__tagline { margin: 0; font-size: var(--bn-fs-body-s); line-height: var(--bn-lh-body-s); color: var(--bn-ink-2); }
.bn-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px 24px;
  max-width: var(--bn-max-sheet);
  margin: 56px auto 0;
  text-align: left;
}
@media (min-width: 1024px) { .bn-footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bn-footer__col-title { margin: 0 0 8px; }
.bn-footer__links { margin: 0; padding: 0; list-style: none; }
.bn-footer__links a {
  display: inline-flex; align-items: center;
  min-height: 32px;
  font-size: var(--bn-fs-small);
  line-height: 1.3;
  color: var(--bn-ink-2);
  text-decoration: none;
  border-radius: 2px;
  transition: color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-footer__links a:hover { color: var(--bn-ink); }
.bn-footer__meta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 24px;
  max-width: var(--bn-max-sheet);
  margin: 48px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--bn-line);
  text-align: left;
}
.bn-footer__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); color: var(--bn-ink-2); }
.bn-footer__legal a { font-size: var(--bn-fs-micro); color: var(--bn-ink-2); text-decoration: none; }
.bn-footer__legal a:hover { color: var(--bn-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   18. ETIQUETA (papel bone, chaves mono). Use com .bn-surface-cream no mesmo elemento
   ========================================================================== */
.bn-etiqueta, .bn-label-tag {
  display: block;
  max-width: 100%;
  padding: 16px 20px;
  background-color: var(--bn-panel);
  color: var(--bn-ink);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-xs);
  font-family: var(--bn-font-body);
}
.bn-etiqueta__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.bn-etiqueta__brand { font-size: var(--bn-fs-caption); line-height: var(--bn-lh-caption); font-weight: var(--bn-fw-medium); color: var(--bn-ink); }
.bn-etiqueta__rule { height: 0; margin: 12px 0 0; border: 0; border-top: 1px dashed var(--bn-line-strong); }
.bn-etiqueta__rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 16px;
  margin: 12px 0 0;
}
.bn-etiqueta__rows dt {
  font-family: var(--bn-font-mono);
  font-size: var(--bn-fs-mono-label);
  line-height: var(--bn-lh-mono-label);
  font-weight: 500;
  letter-spacing: var(--bn-ls-mono-label);
  text-transform: uppercase;
  color: var(--bn-ink-2);
}
.bn-etiqueta__rows dd {
  display: flex; align-items: flex-start; gap: 8px;
  min-width: 0; margin: 0;
  font-size: var(--bn-fs-small);
  line-height: 1.45;
  color: var(--bn-ink);
  overflow-wrap: anywhere;
}
/* dot centrado na 1a linha: quando o valor quebra em 2 linhas (mobile) ele nao flutua no meio */
.bn-etiqueta__dot { width: 8px; height: 8px; flex: none; margin-top: calc((1.45em - 8px) / 2); border-radius: var(--bn-r-pill); background-color: var(--bn-tone); }
.bn-etiqueta__botanical { margin: 12px 0 0; color: var(--bn-ink-2); }
@media (max-width: 359.98px) {
  .bn-etiqueta__rows { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bn-etiqueta__rows dd { margin-bottom: 8px; }
}

/* ==========================================================================
   19. FAQ (details/summary; folha creme)
   ========================================================================== */
.bn-faq { margin: 0; padding: 0; }
.bn-faq__item + .bn-faq__item { border-top: 1px solid var(--bn-line); }
.bn-faq__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px;
  padding-block: 16px;
  border-radius: var(--bn-r-xs);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-title-s);
  line-height: 1.35;
  font-weight: var(--bn-fw-medium);
  color: var(--bn-ink);
  cursor: pointer;
  list-style: none;
}
.bn-faq__summary::-webkit-details-marker { display: none; }
.bn-faq__summary::marker { content: ""; }
.bn-faq__icon { width: 20px; height: 20px; flex: none; color: var(--bn-ink-2); }
/* gira os tracos DENTRO do svg (girar o svg aumentaria a largura do summary) */
.bn-faq__icon > * {
  transform-box: view-box;
  transform-origin: 50% 50%;
  transition: transform var(--bn-dur-short) var(--bn-ease-out);
}
.bn-faq__item[open] > .bn-faq__summary .bn-faq__icon > * { transform: rotate(45deg); }
.bn-faq__answer {
  max-width: var(--bn-max-text);
  padding: 0 36px 24px 0;
  font-size: var(--bn-fs-body);
  line-height: var(--bn-lh-body);
  color: var(--bn-ink-2);
}
.bn-faq__answer > * { margin: 0; }
.bn-faq__answer > * + * { margin-top: 12px; }

.bn-faq-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1024px) {
  .bn-faq-layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 5vw, 96px); }
  .bn-faq-layout__aside { position: sticky; top: calc(var(--bn-nav-top) + var(--bn-nav-h) + 24px); align-self: start; }
}

/* ==========================================================================
   20. SEGMENTED CONTROL (tablist ou radiogroup)
   ========================================================================== */
.bn-segmented {
  display: inline-flex; gap: 2px;
  max-width: 100%;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  background-color: var(--bn-panel-2);
  border-radius: var(--bn-r-md);
}
.bn-segmented::-webkit-scrollbar { display: none; }
.bn-segmented__item {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  height: 36px; min-width: 64px;
  margin: 0; padding: 0 14px;
  border: 0; border-radius: var(--bn-r-sm);
  background-color: transparent;
  color: var(--bn-ink-2);
  font-family: var(--bn-font-body);
  font-size: var(--bn-fs-small);
  font-weight: var(--bn-fw-medium);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--bn-dur-short) var(--bn-ease-soft), background-color var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-segmented__item:hover { color: var(--bn-ink); background-color: var(--bn-hover); }
.bn-segmented__item:is([aria-selected="true"], [aria-checked="true"]) {
  color: var(--bn-ink);
  background-color: hsl(var(--bn-tone-hsl) / 0.16);
  box-shadow: inset 0 0 0 1px var(--bn-line-strong);
}
.bn-segmented__item:focus-visible { outline-offset: 0; }

/* ==========================================================================
   21. CAMPO DE FORMULARIO (creme por padrao de formulario; noite so nos casos §8.18)
   ========================================================================== */
.bn-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bn-field__label { font-size: var(--bn-fs-small); line-height: 1.4; font-weight: var(--bn-fw-medium); color: var(--bn-ink); }
.bn-input, .bn-select, .bn-textarea {
  display: block;
  width: 100%;
  height: var(--bn-input-h);
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--bn-line-strong);
  border-radius: var(--bn-r-sm);
  background-color: var(--bn-panel-2);         /* noite: overlay */
  color: var(--bn-ink);
  font-family: var(--bn-font-body);
  font-size: 16px;                              /* evita zoom no iOS */
  line-height: 1.4;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--bn-dur-short) var(--bn-ease-soft), box-shadow var(--bn-dur-short) var(--bn-ease-soft);
}
.bn-textarea { height: auto; min-height: 120px; resize: vertical; }
.bn-input::placeholder, .bn-textarea::placeholder { color: var(--bn-ink-2); opacity: 1; }
.bn-input:focus, .bn-select:focus, .bn-textarea:focus { outline: none; border-color: var(--bn-focus); box-shadow: 0 0 0 1px var(--bn-focus); }
.bn-surface-cream :is(.bn-input, .bn-select, .bn-textarea) { background-color: var(--bn-panel); } /* creme: bone */
.bn-surface-cream :is(.bn-input, .bn-select, .bn-textarea):focus { box-shadow: var(--bn-shadow-focus-input-cream); }
:is(.bn-input, .bn-select, .bn-textarea)[aria-invalid="true"] { border-color: var(--bn-state-error); }
:is(.bn-input, .bn-select, .bn-textarea):disabled { opacity: 0.45; cursor: not-allowed; }
.bn-surface-cream :is(.bn-input, .bn-select, .bn-textarea):disabled { opacity: 1; background-color: var(--bn-panel-2); color: var(--bn-ink-2); }
.bn-select-wrap { position: relative; }
.bn-select-wrap .bn-select { padding-right: 44px; cursor: pointer; }
.bn-select-wrap::after {
  content: ""; position: absolute; top: 50%; right: 18px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--bn-ink-2);
  border-bottom: 1.5px solid var(--bn-ink-2);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.bn-field__help { margin: 0; font-size: var(--bn-fs-micro); line-height: var(--bn-lh-micro); color: var(--bn-ink-2); }
.bn-field__error { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--bn-fs-micro); line-height: var(--bn-lh-micro); color: var(--bn-state-error); }
.bn-field__error svg { width: 14px; height: 14px; flex: none; }
.bn-check { width: 20px; height: 20px; margin: 0; accent-color: var(--bn-cta-bg); cursor: pointer; }
.bn-inline-form { display: flex; flex-wrap: wrap; gap: 12px; }
.bn-inline-form > .bn-input { flex: 1 1 240px; width: auto; }

/* ==========================================================================
   22. CONVERSA (bolhas, avatar, "digitando")
   ========================================================================== */
.bn-chat { display: flex; flex-direction: column; gap: 20px; }
.bn-msg { display: flex; align-items: flex-start; gap: 12px; max-width: 52ch; }
.bn-msg__avatar { flex: none; width: var(--bn-avatar); height: var(--bn-avatar); border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--bn-line-strong); }
.bn-msg__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; font-size: var(--bn-fs-body); line-height: var(--bn-lh-body); color: var(--bn-ink); }
.bn-msg__body > p { margin: 0; }
.bn-bubble {
  max-width: 44ch;
  margin: 0;
  padding: 12px 16px;
  background-color: var(--bn-panel-2);
  color: var(--bn-ink);
  border-radius: var(--bn-r-lg) var(--bn-r-lg) var(--bn-r-lg) var(--bn-r-xs);
  font-size: var(--bn-fs-body-s);
  line-height: var(--bn-lh-body-s);
}
.bn-bubble--user { align-self: flex-end; border-radius: var(--bn-r-lg) var(--bn-r-lg) var(--bn-r-xs) var(--bn-r-lg); }
.bn-typing { display: inline-flex; align-items: center; gap: 4px; height: 24px; }
.bn-typing > span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background-color: var(--bn-ink-2);
  opacity: 0.3;
  animation: bn-typing var(--bn-dur-typing) var(--bn-ease-soft) infinite;
}
.bn-typing > span:nth-child(2) { animation-delay: 200ms; }
.bn-typing > span:nth-child(3) { animation-delay: 400ms; }
@keyframes bn-typing { 0%, 100% { opacity: 0.3; } 40% { opacity: 1; } }

/* ==========================================================================
   23. TABELA (folha creme)
   ========================================================================== */
.bn-table-wrap {
  overflow-x: auto;
  background-color: var(--bn-panel);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-r-lg);
}
.bn-table { width: 100%; border-collapse: collapse; font-size: var(--bn-fs-body-s); line-height: 1.45; color: var(--bn-ink); }
.bn-table caption { padding: 12px 16px; text-align: left; font-size: var(--bn-fs-caption); color: var(--bn-ink-2); }
.bn-table th {
  height: 44px; padding: 0 16px;
  background-color: var(--bn-panel-2);
  font-size: var(--bn-fs-caption); font-weight: var(--bn-fw-medium);
  color: var(--bn-ink-2); text-align: left; white-space: nowrap;
}
.bn-table td { height: 48px; padding: 12px 16px; border-top: 1px solid var(--bn-line); vertical-align: middle; }
.bn-table td:first-child, .bn-table th[scope="row"] { font-weight: var(--bn-fw-medium); }
.bn-table .bn-num { text-align: right; font-variant-numeric: tabular-nums; }
.bn-table .is-highlight { background-color: hsl(var(--bn-forest-hsl) / 0.06); }
@media (max-width: 767.98px) {
  .bn-table--sticky :is(th, td):first-child { position: sticky; left: 0; z-index: 1; background-color: var(--bn-panel); box-shadow: 1px 0 0 var(--bn-line); }
  .bn-table--sticky th:first-child { background-color: var(--bn-panel-2); }
}

/* ==========================================================================
   24. BARRA INFERIOR FIXA (compra PDP / checkout) — define --bn-bottom-bar-h: 64px no :root
   ========================================================================== */
.bn-bottombar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--bn-z-bottombar);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: calc(64px + env(safe-area-inset-bottom));
  padding: 8px var(--bn-gutter) calc(8px + env(safe-area-inset-bottom));
  background-color: var(--bn-scrim);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--bn-line);
  color: var(--bn-ink);
}

/* ==========================================================================
   25. ENTRADA DE BLOCO (opt-in data-bn-reveal; so abaixo da dobra; nunca opacidade 0)
   ========================================================================== */
.bn-js [data-bn-reveal].is-reveal-pending { transform: translateY(var(--bn-reveal-y)); opacity: 0.6; }
.bn-js [data-bn-reveal].is-revealed {
  transform: none; opacity: 1;
  transition: transform var(--bn-dur-long) var(--bn-ease-out), opacity var(--bn-dur-long) var(--bn-ease-out);
}

/* ==========================================================================
   MOVIMENTO REDUZIDO — desliga loops e deslocamentos (cor e foco continuam)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .bn-drop--float .bn-drop__body,
  .bn-drop--float .bn-drop__ground,
  .bn-orb[aria-busy="true"] .bn-drop__rim,
  .bn-orb[aria-busy="true"] .bn-drop__spec,
  .bn-typing > span { animation: none; }
  .bn-typing > span { opacity: 0.6; }
  .bn-spinner { animation-duration: 1600ms; }
  .bn-nav, .bn-nav__toggle-line, .bn-faq__icon > * { transition-duration: 0ms; }
  :is(a, button):is(.bn-card, .bn-glow-card):hover { transform: none; }
  .bn-btn:not(:disabled, [aria-disabled="true"]):active, .bn-orb:active { transform: none; }
  .bn-hud__wave path { transform: none; }
  .bn-js [data-bn-reveal].is-reveal-pending { transform: none; opacity: 1; }
}