/* ==========================================================================
   BUENO COMMODITIES — Design System
   --------------------------------------------------------------------------
   Território visual: GLOBAL FLOW. Superfícies minerais, tipografia editorial,
   linhas finas no lugar de sombras, acento bronze em dose mínima.
   Sem framework: cada componente aqui existe porque uma página usa.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
    /* Paleta bruta ------------------------------------------------------- */
    --bc-ink: #0E100F;
    --bc-ink-2: #191D1B;
    --bc-graphite: #3C413E;
    --bc-slate: #5E6461;   /* 5.50 sobre papel, 5.07 sobre papel-alt — texto de apoio precisa de 4.5 */
    --bc-mist: #A6ACA7;

    --bc-forest-900: #071D17;
    --bc-forest-800: #0B2A22;
    --bc-forest-700: #10382D;
    --bc-forest-600: #17513F;

    --bc-paper: #F6F4EF;
    --bc-paper-2: #EEEBE2;
    --bc-sand: #DED7C8;
    --bc-sand-2: #C7BEA9;

    --bc-bronze: #96733F;        /* numeral grande e filete: 3.96, acima dos 3.0 exigidos */
    --bc-bronze-deep: #7E5D2B;   /* mesmo bronze escurecido para corpo pequeno: 5.48 */
    --bc-bronze-light: #C4A470;

    /* Papéis semânticos -------------------------------------------------- */
    --surface: var(--bc-paper);
    --surface-alt: var(--bc-paper-2);
    --surface-deep: var(--bc-forest-800);
    --surface-ink: var(--bc-ink);

    --text: var(--bc-ink);
    --text-muted: var(--bc-slate);
    --text-on-deep: #EFEDE7;
    --text-on-deep-muted: #BDC8C1;   /* 9.6 sobre o verde — o #9FACA5 anterior lavava fora de tela Retina */

    --line: rgba(14, 16, 15, .14);
    --line-soft: rgba(14, 16, 15, .08);
    --line-on-deep: rgba(239, 237, 231, .18);
    --line-on-deep-soft: rgba(239, 237, 231, .10);

    --accent: var(--bc-bronze);
    /* Sobre superfície clara, texto pequeno em bronze precisa da versão escura. */
    --accent-strong: var(--bc-bronze-deep);
    --accent-on-deep: var(--bc-bronze-light);

    --focus: #17513F;
    --focus-on-deep: var(--bc-bronze-light);

    /* Tipografia --------------------------------------------------------- */
    --font-sans: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-serif: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

    /* Escala fluida. O display encolhe bastante no mobile: manchete editorial
       grande em tela pequena vira parede de texto, não impacto. */
    --fs-display: clamp(2.5rem, 1.1rem + 5.2vw, 5.5rem);
    --fs-h1: clamp(2.1rem, 1.1rem + 3.6vw, 4rem);
    --fs-h2: clamp(1.6rem, 1.05rem + 2.1vw, 2.75rem);
    --fs-h3: clamp(1.15rem, .98rem + .7vw, 1.5rem);
    --fs-lead: clamp(1.05rem, .98rem + .42vw, 1.3rem);
    --fs-body: 1rem;
    --fs-sm: 1rem;
    --fs-xs: .9375rem;
    --fs-label: .875rem;

    /* Tracking cede um pouco porque o rotulo cresceu: caixa alta de 14px com .16em
       ficava larga demais e quebrava linha cedo em portugues. */
    --tracking-label: .14em;
    --tracking-wordmark: .1em;

    /* Espaço — escala geométrica, sem valores soltos ---------------------- */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;
    --sp-10: 8rem;

    --section-y: clamp(4rem, 2rem + 7vw, 9rem);

    /* Layout ------------------------------------------------------------- */
    --container: 84rem;
    --measure: 38rem;
    --gutter: clamp(1.25rem, .6rem + 2.6vw, 3.5rem);
    --header-h: 5.25rem;

    /* Descritor do wordmark. "GLOBAL COMMODITIES" sao 18 caracteres em mono com
       tracking largo: 181px, que e o que dita a largura do lockup inteiro. Fica
       em variavel porque o valor muda em tela estreita e o bloco :lang(zh) tem
       de acompanhar — era onde o numero ficava duplicado. */
    --wordmark-desc-size: .75rem;
    --wordmark-desc-track: .24em;

    --radius: 2px;
    --radius-lg: 3px;

    /* Movimento — curvas contidas, nada elástico ------------------------- */
    --ease: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: .18s;
    --dur: .32s;
    --dur-slow: .6s;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: 1.6;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -.015em;
    text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

ul, ol { margin: 0; padding: 0; list-style: none; }

dl, dd { margin: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.bc-deep :focus-visible { outline-color: var(--focus-on-deep); }

::selection { background: var(--bc-forest-600); color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.bc-container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.bc-section { padding-block: var(--section-y); }
.bc-section--tight { padding-block: calc(var(--section-y) * .6); }

/* Grade de 12 colunas. Só onde há composição assimétrica de verdade —
   listas simples usam auto-fit e não precisam da grade. */
.bc-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--sp-6) var(--gutter);
}

.bc-deep {
    background: var(--surface-deep);
    color: var(--text-on-deep);
}

.bc-ink { background: var(--surface-ink); color: var(--text-on-deep); }
.bc-alt { background: var(--surface-alt); }

.bc-skip {
    position: absolute;
    left: var(--sp-4);
    top: var(--sp-4);
    z-index: 100;
    padding: var(--sp-3) var(--sp-5);
    background: var(--bc-ink);
    color: var(--text-on-deep);
    transform: translateY(-160%);
    transition: transform var(--dur) var(--ease);
}

.bc-skip:focus-visible { transform: none; }

/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   -------------------------------------------------------------------------- */

.bc-display,
.bc-h1,
.bc-h2 {
    font-family: var(--font-serif);
    font-weight: 300;
    letter-spacing: -.02em;
}

.bc-display { font-size: var(--fs-display); line-height: .96; }
.bc-h1 { font-size: var(--fs-h1); line-height: 1.02; }
.bc-h2 { font-size: var(--fs-h2); line-height: 1.08; }

.bc-h3 {
    font-family: var(--font-sans);
    font-size: var(--fs-h3);
    font-weight: 500;
    letter-spacing: -.005em;
    line-height: 1.25;
}

/* Etiqueta de seção. É o elemento que dá textura editorial ao site inteiro:
   caixa alta, tracking largo, corpo pequeno, sempre acompanhada de um traço. */
.bc-eyebrow {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.bc-eyebrow::before {
    content: "";
    width: 1.75rem;
    height: 1px;
    /* Alinha com a primeira linha, não com o centro do bloco: rótulo que quebra
       em duas linhas deixava o traço flutuando no meio. */
    margin-top: .72em;
    background: var(--accent);
    flex: none;
}

.bc-deep .bc-eyebrow { color: var(--text-on-deep-muted); }
.bc-deep .bc-eyebrow::before { background: var(--accent-on-deep); }

.bc-lead {
    font-size: var(--fs-lead);
    line-height: 1.55;
    color: var(--text-muted);
    max-width: var(--measure);
}

.bc-deep .bc-lead { color: var(--text-on-deep-muted); }

.bc-body { max-width: var(--measure); }
.bc-body + .bc-body { margin-top: var(--sp-4); }

.bc-mono {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: .06em;
    font-variant-numeric: tabular-nums;
}

.bc-muted { color: var(--text-muted); }
.bc-deep .bc-muted { color: var(--text-on-deep-muted); }

/* --------------------------------------------------------------------------
   5. MARCA
   -------------------------------------------------------------------------- */

.bc-wordmark {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-4);
    line-height: 1;
}

.bc-wordmark__mark { width: 2.375rem; height: 2.375rem; flex: none; color: var(--accent); }
.bc-deep .bc-wordmark__mark,
.bc-header--deep .bc-wordmark__mark { color: var(--accent-on-deep); }

.bc-wordmark__type { display: flex; flex-direction: column; gap: .18em; }

.bc-wordmark__name {
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 1.28rem;
    line-height: 1;
    letter-spacing: .085em;
    text-transform: uppercase;
    white-space: nowrap;
}

.bc-wordmark__descriptor {
    font-family: var(--font-mono);
    font-size: var(--wordmark-desc-size);
    letter-spacing: var(--wordmark-desc-track);
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}

.bc-deep .bc-wordmark__descriptor,
.bc-header--deep .bc-wordmark__descriptor { color: var(--text-on-deep-muted); }

/* Abaixo de 360px o lockup cheio (235px) mais o botão da gaveta não cabem na
   linha: o descritor cede tamanho e tracking, e não presença — "Our Goods"
   sozinho não diz o ramo, então esconder o descritor sairia mais caro que
   reduzi-lo. Afeta iPhone SE e Android pequeno; em 375px nada muda. */
@media (max-width: 22.5em) {
    :root {
        --wordmark-desc-size: .6875rem;
        --wordmark-desc-track: .14em;
    }
}

/* --------------------------------------------------------------------------
   6. BOTÕES E LINKS
   -------------------------------------------------------------------------- */

.bc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    min-height: 3rem;
    padding: var(--sp-3) var(--sp-6);
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--bc-ink);
    color: var(--text-on-deep);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.bc-btn:hover { background: var(--bc-forest-700); }

.bc-btn__arrow { transition: transform var(--dur) var(--ease); }
.bc-btn:hover .bc-btn__arrow { transform: translateX(3px); }

/* Acao primaria do heroi: maior que as demais porque e a conversao do projeto. */
.bc-btn--lg {
    min-height: 3.5rem;
    padding-inline: var(--sp-7);
    font-size: 1.0625rem;
}

.bc-btn--ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
}

.bc-btn--ghost:hover { background: transparent; border-color: var(--text); }

.bc-btn--on-deep {
    background: var(--bc-paper);
    color: var(--bc-ink);
}

.bc-btn--on-deep:hover { background: #fff; }

.bc-btn--ghost-on-deep {
    background: transparent;
    color: var(--text-on-deep);
    border-color: var(--line-on-deep);
}

.bc-btn--ghost-on-deep:hover { border-color: var(--text-on-deep); background: transparent; }

/* Link editorial: sublinhado que cresce a partir da esquerda. */
.bc-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding-bottom: 2px;
    background-image: linear-gradient(var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0 1px;
    transition: background-size var(--dur) var(--ease);
}

.bc-link:hover { background-size: 100% 1px; }
.bc-deep .bc-link { background-image: linear-gradient(var(--accent-on-deep), var(--accent-on-deep)); }

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */

.bc-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--surface);
    border-bottom: 1px solid transparent;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.bc-header--deep { background: var(--surface-deep); color: var(--text-on-deep); }

/* Ao rolar, o header ganha régua e fundo sólido — some a sensação de flutuar. */
.bc-header.is-stuck { border-bottom-color: var(--line); }
.bc-header--deep.is-stuck { border-bottom-color: var(--line-on-deep); background: var(--bc-forest-900); }

.bc-header__brand { flex: none; }

.bc-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-5);
    min-height: var(--header-h);
}

.bc-nav { display: flex; align-items: center; gap: var(--sp-6); }

.bc-nav__link {
    position: relative;
    font-size: var(--fs-sm);
    padding-block: var(--sp-2);
    color: inherit;
    transition: opacity var(--dur-fast) var(--ease);
}

.bc-nav__link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur) var(--ease);
}

.bc-nav__link:hover::after,
.bc-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.bc-header__actions { display: flex; align-items: center; gap: var(--sp-5); }

/* Seletor de idioma — três siglas, separadas por régua vertical. */
.bc-langs { display: flex; align-items: center; gap: var(--sp-3); }

.bc-langs__item + .bc-langs__item { border-left: 1px solid var(--line); padding-left: var(--sp-3); }
.bc-header--deep .bc-langs__item + .bc-langs__item,
.bc-deep .bc-langs__item + .bc-langs__item { border-left-color: var(--line-on-deep); }

.bc-langs__link {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease);
}

.bc-header--deep .bc-langs__link,
.bc-deep .bc-langs__link { color: var(--text-on-deep-muted); }

.bc-langs__link:hover { color: var(--text); }
.bc-header--deep .bc-langs__link:hover,
.bc-deep .bc-langs__link:hover { color: var(--text-on-deep); }

.bc-langs__link[aria-current="true"] { color: var(--text); }
.bc-header--deep .bc-langs__link[aria-current="true"],
.bc-deep .bc-langs__link[aria-current="true"] { color: var(--text-on-deep); }

.bc-langs__link.is-off { opacity: .35; cursor: default; }

.bc-burger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-right: calc(var(--sp-3) * -1);
    background: none;
    border: 0;
    cursor: pointer;
}

.bc-burger__box { display: block; width: 22px; height: 10px; position: relative; }
.bc-burger__box::before,
.bc-burger__box::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.bc-burger__box::before { top: 0; }
.bc-burger__box::after { bottom: 0; }
.bc-burger[aria-expanded="true"] .bc-burger__box::before { transform: translateY(4.5px) rotate(45deg); }
.bc-burger[aria-expanded="true"] .bc-burger__box::after { transform: translateY(-4.5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   8. HERO
   -------------------------------------------------------------------------- */

.bc-hero {
    position: relative;
    overflow: hidden;
    background: var(--surface-deep);
    color: var(--text-on-deep);
    padding-block: clamp(4.5rem, 2rem + 9vw, 10rem) 0;
}

/* Malha cartográfica: arcos de rota em traço finíssimo. Decorativa e sem
   custo de rede — é SVG inline, não imagem. */
.bc-hero__mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--bc-bronze-light);
    opacity: .16;
    pointer-events: none;
}

.bc-hero__inner { position: relative; }

.bc-hero__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-7);
    align-items: end;
}

.bc-hero__title { margin-top: var(--sp-6); max-width: 18ch; }

.bc-hero__aside { display: flex; flex-direction: column; gap: var(--sp-5); }

.bc-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }

/* Faixa de mercados no pé do hero — textura de índice, não de ticker animado. */
.bc-hero__index {
    margin-top: clamp(3rem, 1.5rem + 5vw, 6rem);
    border-top: 1px solid var(--line-on-deep);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    /* O filete e a borda direita do item. Sem gap, o texto do item seguinte encosta
       nele: o padding da direita afasta um lado e o outro fica colado. Gap igual ao
       padding deixa o filete com o mesmo respiro dos dois lados. */
    column-gap: var(--sp-6);
}

.bc-hero__indexitem {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-5) var(--sp-6) var(--sp-6) 0;
    border-right: 1px solid var(--line-on-deep-soft);
}

.bc-hero__indexitem:last-child { border-right: 0; }

.bc-hero__indexsymbol {
    font-family: var(--font-mono);
    font-size: 1.25rem;
    letter-spacing: .04em;
    color: var(--accent-on-deep);
}

.bc-hero__indexname { font-size: var(--fs-xs); color: var(--text-on-deep-muted); }

/* --------------------------------------------------------------------------
   9. SEÇÕES EDITORIAIS
   -------------------------------------------------------------------------- */

.bc-sectionhead {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-bottom: var(--sp-8);
}

.bc-sectionhead__top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
}

/* Passos numerados: 01 / 02 / 03. O número é grande e mineral, o texto é sóbrio. */
.bc-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--sp-6);
    border-top: 1px solid var(--line);
}

.bc-step { padding-top: var(--sp-5); border-right: 1px solid var(--line-soft); padding-right: var(--sp-6); }
.bc-step:last-child { border-right: 0; }

.bc-step__num {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-strong);
}

.bc-step__title { margin-top: var(--sp-4); }
.bc-step__body { margin-top: var(--sp-3); color: var(--text-muted); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   10. MERCADOS
   -------------------------------------------------------------------------- */

/* auto-fit para escalar: cinco commodities hoje, doze depois, sem tocar no CSS. */
.bc-markets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
}

.bc-market {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--sp-8);
    min-height: 17rem;
    padding: var(--sp-6);
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: transparent;
    transition: background var(--dur) var(--ease);
    overflow: hidden;
}

.bc-market:hover { background: var(--surface-alt); }
.bc-deep .bc-market:hover { background: var(--bc-forest-700); }

.bc-market__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }

.bc-market__symbol {
    font-family: var(--font-mono);
    font-size: 2.25rem;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--accent);
}

.bc-market__z {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .12em;
    color: var(--text-muted);
    padding-top: .4rem;
}

.bc-market__name { font-family: var(--font-serif); font-size: var(--fs-h2); font-weight: 300; line-height: 1.05; }

.bc-market__category {
    display: block;
    margin-top: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.bc-market__desc {
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* O card inteiro é clicável, mas quem recebe foco é só o link do título. */
.bc-market__link::after { content: ""; position: absolute; inset: 0; }

.bc-market__go {
    align-self: flex-start;
    color: var(--accent);
    transform: translateX(-4px);
    opacity: 0;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.bc-market:hover .bc-market__go,
.bc-market:focus-within .bc-market__go { transform: none; opacity: 1; }

/* --------------------------------------------------------------------------
   11. FICHA DE COMMODITY
   -------------------------------------------------------------------------- */

.bc-commodityhero {
    position: relative;
    overflow: hidden;
    background: var(--surface-deep);
    color: var(--text-on-deep);
    padding-block: clamp(2.5rem, 1rem + 5vw, 5rem) clamp(3rem, 1.5rem + 6vw, 6rem);
}

.bc-commodityhero__grid { display: grid; gap: var(--sp-6); align-items: end; }

.bc-commodityhero__symbol {
    font-family: var(--font-mono);
    font-size: clamp(4rem, 2rem + 10vw, 9rem);
    line-height: .85;
    letter-spacing: .01em;
    color: var(--accent-on-deep);
}

.bc-commoditymeta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    column-gap: var(--sp-6);
    border-top: 1px solid var(--line-on-deep);
    margin-top: var(--sp-7);
}

.bc-commoditymeta__item {
    padding: var(--sp-5) var(--sp-6) 0 0;
    border-right: 1px solid var(--line-on-deep-soft);
}

.bc-commoditymeta__item:last-child { border-right: 0; }

.bc-commoditymeta__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-on-deep-muted);
}

.bc-commoditymeta__value { margin-top: var(--sp-2); font-size: var(--fs-sm); }

.bc-prose h2 { margin-top: var(--sp-7); }
.bc-prose h2:first-child { margin-top: 0; }
.bc-prose p { margin-top: var(--sp-4); max-width: var(--measure); }

/* Bloco de conteúdo ainda não fornecido. Discreto, nunca com cara de erro. */
.bc-pending {
    padding: var(--sp-6);
    border: 1px dashed var(--line);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    max-width: var(--measure);
}

/* --------------------------------------------------------------------------
   12. BREADCRUMB
   -------------------------------------------------------------------------- */

.bc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.bc-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-on-deep-muted);
}

.bc-breadcrumb__item + .bc-breadcrumb__item::before { content: "/"; opacity: .5; }
.bc-breadcrumb__item[aria-current="page"] { color: var(--text-on-deep); }

/* --------------------------------------------------------------------------
   13. FAIXA DE CHAMADA
   -------------------------------------------------------------------------- */

.bc-cta { background: var(--surface-ink); color: var(--text-on-deep); }

/* A faixa é escura como a superfície verde, mas não leva .bc-deep: sem estas
   regras o apoio e o eyebrow ficavam no cinza de papel — 3,2 sobre a tinta,
   abaixo dos 4,5 exigidos para corpo. O cinza sobre-escuro dá 11,1. */
.bc-cta .bc-lead,
.bc-cta .bc-eyebrow { color: var(--text-on-deep-muted); }
.bc-cta .bc-eyebrow::before { background: var(--accent-on-deep); }
.bc-cta :focus-visible { outline-color: var(--focus-on-deep); }

.bc-cta__grid {
    display: grid;
    gap: var(--sp-6);
    align-items: end;
}

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */

.bc-footer { background: var(--surface-ink); color: var(--text-on-deep); }
.bc-footer--stacked { border-top: 1px solid var(--line-on-deep-soft); }

.bc-footer__top {
    display: grid;
    gap: var(--sp-7);
    padding-block: var(--section-y) var(--sp-8);
}

/* A marca ocupa uma coluna larga própria: o rodapé encerra a marca, não lista links. */
.bc-footer__brand { display: flex; flex-direction: column; gap: var(--sp-5); }

.bc-footer__statement {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
    line-height: 1.15;
    max-width: 20ch;
}

.bc-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: var(--sp-6); }

.bc-footer__coltitle {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-on-deep-muted);
    margin-bottom: var(--sp-4);
}

.bc-footer__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bc-footer__list a { font-size: var(--fs-sm); color: var(--text-on-deep); opacity: .85; transition: opacity var(--dur-fast) var(--ease); }
.bc-footer__list a:hover { opacity: 1; }

.bc-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding-block: var(--sp-5) var(--sp-6);
    border-top: 1px solid var(--line-on-deep-soft);
    font-size: var(--fs-xs);
    color: var(--text-on-deep-muted);
}

/* --------------------------------------------------------------------------
   15. MOVIMENTO
   -------------------------------------------------------------------------- */

/* O estado escondido só existe quando o JS assume — sem script, tudo aparece.
   Conteúdo invisível por falha de JS é pior que conteúdo sem animação. */
.js .bc-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.js .bc-reveal.is-in { opacity: 1; transform: none; }

.js .bc-reveal--d1 { transition-delay: .07s; }
.js .bc-reveal--d2 { transition-delay: .14s; }
.js .bc-reveal--d3 { transition-delay: .21s; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .js .bc-reveal { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   16. BREAKPOINTS
   -------------------------------------------------------------------------- */

/* ≥ 768px — tablet */
@media (min-width: 48em) {
    .bc-commodityhero__grid { grid-template-columns: auto 1fr; gap: var(--sp-8); align-items: end; }
    .bc-cta__grid { grid-template-columns: 1.4fr auto; align-items: center; }
    .bc-footer__top { grid-template-columns: 1fr 1.2fr; }
}

/* ≥ 1024px — desktop */
@media (min-width: 64em) {
    .bc-footer__top { grid-template-columns: 1fr 1.4fr; gap: var(--sp-9); }

    /* O herói só abre em duas colunas aqui, e não em 768px: naquela largura a
       coluna do plotter cai para ~205px e os rótulos de coordenada ficam
       ilegíveis. Abaixo disso o instrumento fica embaixo, em tamanho útil. */
    .bc-hero__grid { grid-template-columns: 1.35fr .65fr; gap: var(--sp-8); }
}

/* < 1120px — o menu vira gaveta.

   O número saiu de medição, não de convenção: a linha do header precisa de
   1027px em pt-BR (lockup 235 + 24 de intervalo + 768 de menu), o idioma mais
   largo dos quatro — en pede 986, es 1010, zh 842. Com os medianizes somados,
   a navegação em linha só cabe a partir de ~1108px, e 1120 deixa folga.

   Enquanto este limite era 900px, pt-BR transbordava a linha em 81px em telas
   de 960: o menu simplesmente não caberia nem com lockup nenhum. O defeito já
   existia; o descritor mais longo apenas o deixou visível.

   A sintaxe de intervalo (`width < 70em`) não é capricho: com o par clássico
   `max-width: 69.9375em` / `min-width: 70em`, largura fracionária de viewport
   (1119,5px, comum quando a janela é escalada) não casa em nenhum dos dois, e
   o header fica sem gaveta e sem menu em linha. Um número, dois lados.

   ATENÇÃO: há quatro blocos presos a este limite — este, o `width >= 70em`
   logo abaixo, o do CTA e o do agrupamento "Empresa". Mover um sem os outros
   deixa a gaveta e o menu em linha visíveis ao mesmo tempo. */
@media (width < 70em) {
    .bc-burger { display: inline-flex; }

    .bc-header__menu {
        position: fixed;
        inset: var(--header-h) 0 0;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: var(--sp-7);
        padding: var(--sp-7) var(--gutter) var(--sp-8);
        background: var(--surface-deep);
        color: var(--text-on-deep);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                    visibility 0s linear var(--dur);
    }

    .bc-header__menu.is-open {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }

    .bc-nav { flex-direction: column; align-items: stretch; gap: 0; }

    /* No mobile a navegação vira lista editorial: item grande, régua entre eles. */
    .bc-nav__link {
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
        font-weight: 300;
        padding-block: var(--sp-4);
        border-bottom: 1px solid var(--line-on-deep-soft);
    }

    .bc-nav__link::after { display: none; }

    .bc-header__actions {
        flex-direction: column;
        align-items: stretch;
        gap: var(--sp-5);
    }

    .bc-header__actions .bc-btn { width: 100%; }

    .bc-langs { justify-content: flex-start; }
    .bc-langs__link { font-size: var(--fs-sm); }

    body.is-locked { overflow: hidden; }
}

/* ≥ 1120px — a gaveta não existe */
@media (width >= 70em) {
    .bc-header__menu {
        display: flex !important;
        align-items: center;
        gap: var(--sp-7);
        visibility: visible;
        opacity: 1;
    }
}

/* Telas muito largas: o container respira mais, sem esticar a linha de texto. */
@media (min-width: 100em) {
    :root { --gutter: 5rem; }
}

/* --------------------------------------------------------------------------
   17. CABEÇALHO DE PÁGINA
   -------------------------------------------------------------------------- */

/* Abertura padrão das páginas internas: etiqueta, título, apoio. Existe como
   componente para que Mercados, Privacidade e Erro tenham o mesmo ritmo — é o
   que faz páginas diferentes parecerem o mesmo site. */
.bc-pagehead { display: flex; flex-direction: column; gap: var(--sp-5); }
.bc-pagehead__title { max-width: 16ch; }
.bc-pagehead__lead { max-width: var(--measure); }
.bc-pagehead--wide .bc-pagehead__title { max-width: 22ch; }

.bc-commodityhero .bc-breadcrumb { margin-bottom: var(--sp-7); }
.bc-commodityhero .bc-market__category { color: var(--text-on-deep-muted); }

.bc-cta__body { margin-top: var(--sp-4); }
.bc-requestid { margin-top: var(--sp-6); }

/* --------------------------------------------------------------------------
   18. FOTOGRAFIA
   -------------------------------------------------------------------------- */

.bc-figure { position: relative; overflow: hidden; }

.bc-figure--inline {
    aspect-ratio: var(--bc-figure-ratio, 3 / 2);
    background: var(--surface-alt);
}

.bc-figure--bleed { position: absolute; inset: 0; }

.bc-figure__img { width: 100%; height: 100%; object-fit: cover; }

/* Briefing de produção da imagem. Só renderiza em Development — em produção o
   espaço fica neutro, porque documento interno não pode vazar para o visitante. */
.bc-figure__brief {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background:
        repeating-linear-gradient(135deg, rgba(150, 115, 63, .10) 0 1px, transparent 1px 9px),
        var(--surface-alt);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.45;
    overflow: hidden;
}

.bc-figure__key {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent-strong);
}

.bc-figure__spec {
    margin-top: auto;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .08em;
}

/* Em slot sangrado o briefing vira etiqueta de canto: marca o ponto sem
   descaracterizar a seção, que já está desenhada e precisa continuar legível. */
.bc-figure--bleed .bc-figure__brief {
    /* Canto superior direito: o inferior esquerdo colidia com a faixa de índice
       do herói, e o superior está vazio nas três seções que usam slot sangrado. */
    inset: var(--sp-5) var(--gutter) auto auto;
    max-width: 24rem;
    padding: var(--sp-4);
    background: rgba(14, 16, 15, .78);
    border: 1px dashed var(--line-on-deep);
    color: var(--text-on-deep-muted);
}

.bc-figure--bleed .bc-figure__key { color: var(--accent-on-deep); }
.bc-figure--bleed .bc-figure__framing { display: none; }

.bc-figure--bleed .bc-figure__subject {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Camada de mídia das seções escuras ------------------------------------ */

.bc-media { position: absolute; inset: 0; z-index: 0; }

/* Dentro de uma camada de midia a figura preenche, em vez de impor a propria proporcao. */
.bc-media > .bc-figure,
.bc-market__media > .bc-figure { position: absolute; inset: 0; aspect-ratio: auto; }

/* Véu direcional: escurece o lado do texto e libera o outro, para a foto
   aparecer sem nunca disputar com a manchete. */
.bc-media--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        var(--bc-forest-900) 0%,
        rgba(7, 29, 23, .94) 42%,
        rgba(7, 29, 23, .62) 100%);
}

.bc-media--band::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(11, 42, 34, .93) 0%,
        rgba(11, 42, 34, .82) 100%);
}

.bc-hasmedia { position: relative; }
.bc-hasmedia > .bc-container,
.bc-hasmedia > .bc-hero__inner { position: relative; z-index: 2; }

/* --- Foto no card de commodity -------------------------------------------- */

/* Discreta em repouso e mais presente no hover: a leitura primária do card
   continua sendo tipográfica. */
.bc-market__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .16;
    filter: grayscale(.35);
    transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}

.bc-market:hover .bc-market__media,
.bc-market:focus-within .bc-market__media { opacity: .30; filter: grayscale(0); }

.bc-market__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(246, 244, 239, .55) 0%, rgba(246, 244, 239, .88) 100%);
}

.bc-market > *:not(.bc-market__media) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
    .bc-market__media { transition: none; }
}

/* --------------------------------------------------------------------------
   19. ASSINATURA CARTOGRÁFICA — "GLOBAL FLOW"
   --------------------------------------------------------------------------
   Não é ornamento de fundo: é um instrumento. Grade de paralelos, trajetória
   entre dois pontos e leitura em mono. Precisa parecer um plotter de rota,
   não um mapa-múndi decorativo.
   -------------------------------------------------------------------------- */

.bc-plot {
    position: relative;
    width: 100%;
    max-width: 30rem;
    margin-left: auto;
    color: var(--accent-on-deep);
}

.bc-plot__svg { width: 100%; height: auto; overflow: visible; }

.bc-plot__grid { stroke: currentColor; stroke-width: .6; opacity: .3; fill: none; }
.bc-plot__tick { stroke: currentColor; stroke-width: .6; opacity: .5; }
.bc-plot__route { stroke: currentColor; stroke-width: 1.2; opacity: .9; fill: none; }
.bc-plot__route--faint { opacity: .32; stroke-width: .8; }
.bc-plot__node { fill: currentColor; }
.bc-plot__halo { fill: none; stroke: currentColor; stroke-width: .8; opacity: .5; }

.bc-plot__label {
    font-family: var(--font-mono);
    font-size: 7px;
    letter-spacing: .16em;
    text-transform: uppercase;
    fill: currentColor;
    opacity: .85;
}

.bc-plot__degree {
    font-family: var(--font-mono);
    font-size: 6px;
    letter-spacing: .1em;
    fill: currentColor;
    opacity: .55;
}

/* A trajetória se desenha uma vez, na entrada. Sem laço: repetição transforma
   instrumento em animação de fundo, que é o que se quer evitar. */
.js .bc-plot__route--draw {
    stroke-dasharray: 340;
    stroke-dashoffset: 340;
    transition: stroke-dashoffset 2.2s var(--ease) .35s;
}

.js .is-in .bc-plot__route--draw { stroke-dashoffset: 0; }

.bc-plot__legend {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line-on-deep-soft);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-on-deep-muted);
}

@media (prefers-reduced-motion: reduce) {
    .js .bc-plot__route--draw { stroke-dasharray: none; stroke-dashoffset: 0; transition: none; }
}

/* Versão larga, para a faixa de alcance internacional. */
.bc-plot--band { max-width: none; margin: 0; }
.bc-plot--band .bc-plot__grid { stroke-width: 1.3; opacity: .48; }
.bc-plot--band .bc-plot__tick { stroke-width: 1.3; }
.bc-plot--band .bc-plot__route { stroke-width: 2.6; }
.bc-plot--band .bc-plot__route--faint { stroke-width: 1.8; opacity: .46; }
.bc-plot--band .bc-plot__halo { stroke-width: 1.6; }
.bc-plot--band .bc-plot__label { font-size: 11px; letter-spacing: .2em; }
.bc-plot--band .bc-plot__degree { font-size: 10px; }

/* --------------------------------------------------------------------------
   20. ASSINATURA DE MATERIAL POR COMMODITY
   --------------------------------------------------------------------------
   Cada commodity ganha um desenho derivado do próprio material — anel de
   lingote, escoamento viscoso, dispersão de gás, grão, retículo de cristal.
   É o que faz cinco cards deixarem de ser cinco caixas tipográficas iguais.
   Vive em SVG: escala, herda cor e não custa requisição.
   -------------------------------------------------------------------------- */

.bc-signature {
    position: absolute;
    inset: 0;
    z-index: 0;
    color: var(--accent);
    opacity: .17;
    transition: opacity var(--dur) var(--ease), transform var(--dur-slow) var(--ease);
    pointer-events: none;
}

.bc-signature svg { width: 100%; height: 100%; }

.bc-market:hover .bc-signature,
.bc-market:focus-within .bc-signature { opacity: .36; transform: scale(1.04); }

.bc-deep .bc-signature,
.bc-commodityhero .bc-signature { color: var(--accent-on-deep); opacity: .24; }

@media (prefers-reduced-motion: reduce) {
    .bc-signature { transition: none; }
    .bc-market:hover .bc-signature { transform: none; }
}

/* O card cresceu um degrau para a assinatura ter área onde existir. */
.bc-market { min-height: 19rem; }

/* --------------------------------------------------------------------------
   21. PILARES DE CREDIBILIDADE
   -------------------------------------------------------------------------- */

.bc-pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    column-gap: var(--sp-6);
    border-top: 1px solid var(--line);
}

.bc-pillar {
    padding: var(--sp-6) var(--sp-6) var(--sp-7) 0;
    border-right: 1px solid var(--line-soft);
}

.bc-pillar:last-child { border-right: 0; }

.bc-pillar__mark { width: 1.5rem; height: 1.5rem; color: var(--accent); }
.bc-pillar__title { margin-top: var(--sp-4); }
.bc-pillar__body { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   22. INSIGHTS
   -------------------------------------------------------------------------- */

/* Lista, e nao grade de cards: publicacao especializada se le em linhas separadas
   por filete, com numero de entrada e chamada de leitura. Sem sombra, sem thumbnail. */
.bc-insights {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
}

.bc-insight {
    position: relative;
    display: grid;
    gap: var(--sp-4);
    padding-block: var(--sp-6);
    border-bottom: 1px solid var(--line);
    transition: background var(--dur) var(--ease);
}

.bc-insight:hover { background: rgba(14, 16, 15, .025); }

/* Categoria e data separadas por ponto medio, como em ficha de publicacao. */
.bc-insight__meta span + span::before { content: "·"; margin-right: var(--sp-3); opacity: .6; }

.bc-insight__index {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-strong);
}

.bc-insight__body { display: flex; flex-direction: column; gap: var(--sp-3); }

.bc-insight__read {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    white-space: nowrap;
    color: var(--text);
}

.bc-insight__read span { transition: transform var(--dur) var(--ease); }
.bc-insight:hover .bc-insight__read span { transform: translateX(4px); }

@media (min-width: 48em) {
    .bc-insight {
        grid-template-columns: 4.5rem minmax(0, 1fr) auto;
        gap: var(--sp-4) var(--gutter);
        align-items: start;
    }

    .bc-insight__read { justify-self: end; align-self: center; }
}

.bc-insight__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.bc-insight__title {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem);
    line-height: 1.15;
    letter-spacing: -.015em;
}

.bc-insight__title a::after { content: ""; position: absolute; inset: 0; }

.bc-insight__summary { font-size: var(--fs-sm); color: var(--text-muted); }



/* --------------------------------------------------------------------------
   23. MANIFESTAÇÃO DE INTERESSE — PAPÉIS
   -------------------------------------------------------------------------- */

.bc-roles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    border-top: 1px solid var(--line-on-deep);
    border-left: 1px solid var(--line-on-deep-soft);
    margin-top: var(--sp-7);
}

.bc-role {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    min-height: 13rem;
    padding: var(--sp-6);
    border-right: 1px solid var(--line-on-deep-soft);
    border-bottom: 1px solid var(--line-on-deep-soft);
    transition: background var(--dur) var(--ease);
}

.bc-role { cursor: pointer; }
.bc-role:hover,
.bc-role:focus-within { background: rgba(239, 237, 231, .06); }

/* Seta colada no nome: e o sinal mais direto de que o bloco leva a algum lugar. */
.bc-role__arrow {
    display: inline-block;
    margin-left: .3em;
    color: var(--accent-on-deep);
    transition: transform var(--dur) var(--ease);
}

.bc-role:hover .bc-role__arrow,
.bc-role:focus-within .bc-role__arrow { transform: translateX(5px); }

.bc-role__index {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-on-deep);
}

.bc-role__name {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    line-height: 1.1;
}

.bc-role__name a::after { content: ""; position: absolute; inset: 0; }

.bc-role__body { font-size: var(--fs-sm); color: var(--text-on-deep-muted); }

.bc-role__go {
    margin-top: auto;
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-on-deep-soft);
    color: var(--accent-on-deep);
    opacity: .8;
    transition: opacity var(--dur) var(--ease);
}

.bc-role:hover .bc-role__go,
.bc-role:focus-within .bc-role__go { opacity: 1; }

/* --------------------------------------------------------------------------
   24. PAR DE AÇÕES — PRIMÁRIA E SECUNDÁRIA
   --------------------------------------------------------------------------
   A conversão comercial do projeto é a manifestação de interesse. Ela é sempre
   a ação sólida; explorar mercados é sempre a ação de contorno.
   -------------------------------------------------------------------------- */

.bc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }

.bc-header__cta { white-space: nowrap; min-height: 2.75rem; padding-inline: var(--sp-5); }

@media (max-width: 56.25em) {
    .bc-pillar { border-right: 0; padding-right: 0; }
    .bc-role { border-right: 0; }
    .bc-roles { border-left: 0; }
}

/* --------------------------------------------------------------------------
   25. AJUSTES DE COMPOSIÇÃO DA HOME
   -------------------------------------------------------------------------- */

/* O apoio e as ações desceram para a coluna da manchete; a coluna direita passou
   a ser inteiramente do instrumento cartográfico. */
.bc-hero__lead { margin-top: var(--sp-6); }
.bc-hero__actions { margin-top: var(--sp-6); }
.bc-hero__aside { justify-content: flex-end; }

.bc-processcta {
    margin-top: var(--sp-8);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
    align-items: center;
    gap: var(--sp-5);
}

.bc-processcta__note { font-size: var(--fs-sm); max-width: 30ch; }

/* Alcance internacional: texto à esquerda, plotter aberto à direita. */
.bc-reach { display: grid; gap: var(--sp-8); align-items: center; }
.bc-reach__title { margin-top: var(--sp-5); }
.bc-reach__body { margin-top: var(--sp-5); }

.bc-article__head { margin-top: var(--sp-7); }
.bc-article__back { margin-top: var(--sp-8); }

@media (min-width: 48em) {
    .bc-reach { grid-template-columns: minmax(0, 27rem) minmax(0, 1fr); gap: var(--sp-8); }
}

/* Abaixo de 1120px o header já é uma gaveta: o CTA vai para dentro dela, em
   largura cheia, e o seletor de idioma fica logo abaixo. Acompanha o limite da
   gaveta, e não o do herói — por isso os dois blocos. */
@media (width < 70em) {
    .bc-header__cta { width: 100%; min-height: 3rem; }
}

/* O herói continua no limite de 900px: o que o faz virar uma coluna é a largura
   útil do plotter cartográfico, que nada tem a ver com o menu caber na linha. */
@media (max-width: 56.25em) {
    .bc-hero__aside { margin-top: var(--sp-7); }
    .bc-plot { max-width: 22rem; margin-inline: 0; }
}

/* Em telas estreitas a ação ocupa a largura inteira: alvo de toque maior e
   ritmo vertical mais limpo que dois botões de larguras diferentes. */
@media (max-width: 36em) {
    .bc-hero__actions .bc-btn,
    .bc-processcta .bc-btn { width: 100%; }
    .bc-processcta { align-items: flex-start; }
    .bc-processcta__note { max-width: none; }
}

/* --------------------------------------------------------------------------
   26. NAVEGAÇÃO AGRUPADA
   --------------------------------------------------------------------------
   Seis itens soltos no topo pesam. Mercados e Insights ficam à vista porque são
   as duas entradas de conteúdo; Sobre, Soluções e Contato entram sob "Empresa".
   -------------------------------------------------------------------------- */

.bc-nav__group { position: relative; }

.bc-nav__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    background: none;
    border: 0;
    font-size: var(--fs-sm);
    cursor: pointer;
    color: inherit;
}

.bc-nav__caret { transition: transform var(--dur) var(--ease); }
.bc-nav__toggle[aria-expanded="true"] .bc-nav__caret { transform: rotate(180deg); }

.bc-nav__panel {
    position: absolute;
    top: calc(100% + var(--sp-3));
    left: calc(var(--sp-4) * -1);
    z-index: 10;
    display: flex;
    flex-direction: column;
    min-width: 13rem;
    padding: var(--sp-3) 0;
    background: var(--bc-forest-900);
    border: 1px solid var(--line-on-deep);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease),
                visibility 0s linear var(--dur);
}

.bc-nav__group:hover .bc-nav__panel,
.bc-nav__group:focus-within .bc-nav__panel,
.bc-nav__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

.bc-nav__panellink {
    padding: var(--sp-3) var(--sp-5);
    font-size: var(--fs-sm);
    color: var(--text-on-deep);
    transition: background var(--dur-fast) var(--ease);
}

.bc-nav__panellink:hover { background: rgba(239, 237, 231, .07); }

/* Na gaveta o agrupamento não faz sentido: vira lista aberta, indentada.
   Preso ao limite da gaveta (1120px), não ao do herói. */
@media (width < 70em) {
    .bc-nav__toggle {
        width: 100%;
        justify-content: space-between;
        font-family: var(--font-serif);
        font-size: clamp(1.75rem, 1.2rem + 3vw, 2.5rem);
        font-weight: 300;
        padding-block: var(--sp-4);
        border-bottom: 1px solid var(--line-on-deep-soft);
    }

    .bc-nav__caret { display: none; }

    .bc-nav__panel {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        min-width: 0;
        padding: var(--sp-2) 0 var(--sp-4);
        background: none;
        border: 0;
    }

    .bc-nav__panellink { padding: var(--sp-3) 0 var(--sp-3) var(--sp-5); }
}

/* --------------------------------------------------------------------------
   27. ACABAMENTO FINAL
   -------------------------------------------------------------------------- */

/* O apoio dos pilares tinha só título; a headline nova pede uma linha de apoio. */
.bc-sectionhead .bc-lead { margin-top: 0; }

/* Foco visível também nos blocos que são clicáveis pelo ::after do link interno:
   sem isso o anel de foco aparece num link de área zero. */
.bc-market:focus-within,
.bc-role:focus-within,
.bc-insight:focus-within { outline: 2px solid var(--focus-on-deep); outline-offset: -2px; }

.bc-market:focus-within { outline-color: var(--focus); }

/* Alvo de toque: o mínimo de 44px vale para os links pequenos do rodapé e do
   seletor de idioma, que são os menores da página. */
@media (pointer: coarse) {
    .bc-footer__list a,
    .bc-langs__link,
    .bc-nav__panellink { display: inline-flex; align-items: center; min-height: 2.75rem; }
}

/* --------------------------------------------------------------------------
   28. CHINÊS — AJUSTE TIPOGRÁFICO
   --------------------------------------------------------------------------
   Newsreader, Archivo e IBM Plex Mono não têm glifo chinês. Sem uma pilha
   explícita, o navegador escolhe sozinho e o resultado muda de máquina para
   máquina. A pilha abaixo usa fonte do sistema de propósito: webfont CJK passa
   de 5 MB, e o ganho de marca não paga o custo para quem está do outro lado do
   mundo numa conexão qualquer.
   -------------------------------------------------------------------------- */

:lang(zh) {
    --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
                 "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
    --font-serif: "Songti SC", "Noto Serif SC", "Source Han Serif SC",
                  "SimSun", serif;

    /* O rótulo perde quase todo o tracking: espaçamento largo entre ideogramas
       separa o que o leitor lê como uma palavra só. */
    --tracking-label: .04em;
}

/* Kerning apertado fecha o desenho do ideograma, e a entrelinha de .96 do
   display gruda uma linha na outra — caractere chinês ocupa a altura toda. */
:lang(zh) .bc-display,
:lang(zh) .bc-h1,
:lang(zh) .bc-h2,
:lang(zh) .bc-market__name,
:lang(zh) .bc-insight__title,
:lang(zh) .bc-role__name,
:lang(zh) .bc-rolesheet__name,
:lang(zh) .bc-faq__q,
:lang(zh) .bc-footer__statement {
    letter-spacing: 0;
    line-height: 1.3;
}

:lang(zh) .bc-h3 { letter-spacing: 0; }

/* Caixa alta não existe em chinês: text-transform não faz nada no ideograma,
   mas ainda pegaria as palavras latinas misturadas (Bueno Commodities). */
:lang(zh) .bc-eyebrow,
:lang(zh) .bc-market__category,
:lang(zh) .bc-insight__meta,
:lang(zh) .bc-commoditymeta__label,
:lang(zh) .bc-footer__coltitle,
:lang(zh) .bc-rolesheet__label,
:lang(zh) .bc-faq__grouptitle,
:lang(zh) .bc-breadcrumb__item,
:lang(zh) .bc-plot__legend {
    text-transform: none;
}

/* A marca é latina em qualquer idioma: devolver a família original evita que o
   wordmark seja desenhado pelos glifos latinos de uma fonte CJK. */
:lang(zh) .bc-wordmark__name { font-family: "Archivo", sans-serif; letter-spacing: .085em; }
:lang(zh) .bc-wordmark__descriptor { font-family: "IBM Plex Mono", monospace; letter-spacing: var(--wordmark-desc-track); }

/* Medida em ch pressupõe caractere latino estreito. Em chinês o mesmo número de
   ch vira metade das palavras, e a manchete fica alta e fina. */
:lang(zh) .bc-hero__title { max-width: 15em; }
:lang(zh) .bc-pagehead__title { max-width: 14em; }
:lang(zh) .bc-footer__statement { max-width: 16em; }
:lang(zh) .bc-processcta__note { max-width: 24em; }

/* --------------------------------------------------------------------------
   29. PÁGINAS INSTITUCIONAIS — POR PAPEL, LIMITES, PRINCÍPIOS E FAQ
   --------------------------------------------------------------------------
   Conteúdo que veio da análise de concorrentes. Mesmo vocabulário do resto do
   site: filete no lugar de caixa, numeral mono em bronze, título em serif.
   Nenhum card, nenhuma sombra, nenhum ícone de biblioteca.
   -------------------------------------------------------------------------- */

/* Por papel (Soluções): três colunas de leitura, no ritmo dos pilares da home,
   cada uma com os dois rótulos que respondem "o que eu informo" e "o que vem
   depois". Não é clicável — a ação da página está toda no fecho. */
.bc-rolesheet {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    column-gap: var(--sp-6);
    border-top: 1px solid var(--line);
}

.bc-rolesheet__item {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding: var(--sp-6) var(--sp-6) var(--sp-7) 0;
    border-right: 1px solid var(--line-soft);
}

.bc-rolesheet__item:last-child { border-right: 0; }

.bc-rolesheet__index {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-strong);
}

.bc-rolesheet__name {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem);
    line-height: 1.1;
}

.bc-rolesheet__list { display: flex; flex-direction: column; gap: var(--sp-2); }

.bc-rolesheet__label {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line-soft);
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent-strong);
}

.bc-rolesheet__label:first-child { margin-top: 0; }

.bc-rolesheet__text { font-size: var(--fs-sm); color: var(--text-muted); }

/* Limites (Soluções): afirmações curtas em duas colunas, cada uma aberta pelo
   mesmo traço bronze do eyebrow — é a marca de "isto é uma regra da casa". */
.bc-limits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    column-gap: var(--sp-7);
    border-top: 1px solid var(--line);
}

.bc-limits__item {
    position: relative;
    padding: var(--sp-5) 0 var(--sp-5) var(--sp-6);
    border-bottom: 1px solid var(--line-soft);
    font-size: 1.0625rem;
    line-height: 1.5;
}

.bc-limits__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--sp-5) + .75em);
    width: 1rem;
    height: 1px;
    background: var(--accent);
}

/* Princípios (Sobre): lista editorial numerada, como a de Insights — número,
   título e corpo na mesma linha a partir de 768px, separados por filete. */
.bc-principles { border-top: 1px solid var(--line); }

.bc-principle {
    display: grid;
    gap: var(--sp-3);
    padding-block: var(--sp-6);
    border-bottom: 1px solid var(--line);
}

.bc-principle__num {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-strong);
}

.bc-principle__body { font-size: var(--fs-sm); color: var(--text-muted); max-width: var(--measure); }

@media (min-width: 48em) {
    .bc-principle {
        grid-template-columns: 4.5rem minmax(0, 17rem) minmax(0, 1fr);
        gap: var(--sp-4) var(--gutter);
        align-items: baseline;
    }
}

/* Perguntas frequentes (Contato): <details> nativo. O sinal é um caractere
   mono em bronze que vira menos ao abrir — sem ícone, sem script. */
.bc-faq { display: flex; flex-direction: column; gap: var(--sp-8); }

.bc-faq__group { display: grid; gap: var(--sp-5); }

.bc-faq__grouptitle {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    font-weight: 400;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--accent-strong);
}

.bc-faq__items { border-top: 1px solid var(--line); }

.bc-faq__item { border-bottom: 1px solid var(--line); }

.bc-faq__q {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-block: var(--sp-5);
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.2rem, 1.02rem + .6vw, 1.5rem);
    line-height: 1.25;
    letter-spacing: -.01em;
    cursor: pointer;
    list-style: none;
    transition: color var(--dur-fast) var(--ease);
}

.bc-faq__q::-webkit-details-marker { display: none; }

.bc-faq__q::after {
    content: "+";
    flex: none;
    font-family: var(--font-mono);
    font-size: 1.25rem;
    line-height: 1;
    color: var(--accent-strong);
}

.bc-faq__item[open] > .bc-faq__q::after { content: "\2212"; }

.bc-faq__q:hover { color: var(--focus); }

.bc-faq__a {
    padding-bottom: var(--sp-6);
    max-width: var(--measure);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

@media (min-width: 64em) {
    .bc-faq__group { grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--gutter); }
    .bc-faq__grouptitle { padding-top: var(--sp-5); }
}

/* Empilhado, o filete vertical vira horizontal: sem ele, os três papéis se
   fundiam num bloco só de texto. */
@media (max-width: 56.25em) {
    .bc-rolesheet__item { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--line-soft); }
    .bc-rolesheet__item:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
   30. REFINAMENTO DE LAYOUT — SEXTA RODADA
   --------------------------------------------------------------------------
   O defeito que mais pesava contra o site era o mesmo em quase toda página
   interna: conteúdo encostado à esquerda e metade da largura vazia. Nada aqui
   muda cor, fonte ou componente de marca; muda a ocupação da página.
   -------------------------------------------------------------------------- */

/* Aberturas de página e de seção em duas colunas a partir de 1024px: título à
   esquerda, apoio à direita, alinhados pela base. Na abertura escura o apoio
   ganha um filete vertical, que é o que o separa do título sem caixa nenhuma.
   Só CSS — o markup das páginas não mudou, e sem :has() tudo volta ao
   empilhado de antes. */
@media (width >= 64em) {
    .bc-pagehead:not(.bc-article__head):has(> .bc-pagehead__lead),
    .bc-sectionhead:has(> .bc-lead) {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--sp-9);
        row-gap: var(--sp-5);
        align-items: end;
    }

    .bc-pagehead:not(.bc-article__head):has(> .bc-pagehead__lead) > .bc-eyebrow,
    .bc-sectionhead:has(> .bc-lead) > .bc-eyebrow { grid-column: 1 / -1; }

    .bc-pagehead:not(.bc-article__head):has(> .bc-pagehead__lead) > .bc-pagehead__lead {
        padding: var(--sp-2) 0 var(--sp-2) var(--sp-6);
        border-left: 1px solid var(--line-on-deep);
    }

    .bc-sectionhead:has(> .bc-lead) > .bc-lead { padding-bottom: .3em; }
}

/* Declaração (Sobre, Contato): a tese em serifa à esquerda, o apoio à direita,
   no mesmo eixo de duas colunas das aberturas. Antes eram três parágrafos de
   interface encostados à esquerda, com a outra metade da página vazia. */
.bc-statement { display: grid; gap: var(--sp-6); }

.bc-statement__lead {
    max-width: 30ch;
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.25rem);
    line-height: 1.28;
    letter-spacing: -.012em;
}

.bc-statement__body { max-width: var(--measure); font-size: 1.0625rem; line-height: 1.7; color: var(--text-muted); }
.bc-statement__body p + p { margin-top: var(--sp-4); }

@media (width >= 64em) {
    .bc-statement {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        column-gap: var(--sp-9);
        align-items: start;
    }

    .bc-statement__body { padding-top: .45em; }
}

:lang(zh) .bc-statement__lead { max-width: 20em; letter-spacing: 0; line-height: 1.5; }

/* Grade de mercados sem célula vazia. Com cinco commodities em três colunas,
   a segunda linha tinha dois cards e um buraco. Em seis trilhas, cada card
   ocupa duas; a linha que sobra com dois divide a largura ao meio, e a que
   sobra com um puxa o anterior para formar duas linhas de dois. Vale para
   qualquer quantidade — o catálogo continua crescendo sem tocar no CSS. */
@media (48em <= width < 64em) {
    .bc-markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-market:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (width >= 64em) {
    .bc-markets { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .bc-market { grid-column: span 2; }

    /* total ÷ 3 deixa resto 2: os dois últimos dividem a linha */
    .bc-market:nth-child(3n+1):nth-last-child(2),
    .bc-market:nth-child(3n+1):nth-last-child(2) + .bc-market,
    /* resto 1: os quatro últimos em duas linhas de dois */
    .bc-market:nth-child(3n+1):nth-last-child(4),
    .bc-market:nth-child(3n+1):nth-last-child(4) ~ .bc-market { grid-column: span 3; }

    .bc-market:only-child { grid-column: 1 / -1; }
}

/* A assinatura de material volta a ser fundo do card, como a seção 20 manda.
   A regra das fotos (seção 15, `.bc-market > *` relativo) a tinha puxado para
   o fluxo como um quadrado do tamanho da largura: o card media 550px de altura
   em três colunas e 706px nos dois largos. Como fundo, todos ficam na altura
   mínima e a grade lê como índice, não como mural. */
.bc-market > .bc-signature { position: absolute; inset: 0; z-index: 0; }

/* Pilares: quatro numa linha só a partir de 1280px; antes disso, dois por dois.
   Em 1024px o auto-fit dava três e deixava "Mais de um mercado" sozinho. */
@media (48em <= width < 80em) {
    .bc-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bc-pillar:nth-child(2n) { border-right: 0; }
    .bc-pillar:nth-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
}

@media (width >= 80em) {
    .bc-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* O resumo do card agora é a descrição curta da ficha, frase completa: sem
   corte. Reticências no meio da frase eram a marca mais visível de texto que
   não coube — os cards da mesma linha crescem juntos e continuam alinhados. */
.bc-market__desc { display: block; -webkit-line-clamp: unset; overflow: visible; max-width: 34rem; }

/* Abertura da ficha: o nome da commodity é o assunto, não o numeral. Em 1440px
   o "01" em mono de 144px tinha o dobro da altura de "Ouro" e lia como título;
   o nome passa ao tamanho de display e o numeral cede um degrau. */
.bc-commodityhero .bc-h1 { font-size: var(--fs-display); line-height: .96; }
.bc-commodityhero__symbol { font-size: clamp(3.25rem, 1.8rem + 6vw, 6.5rem); }
:lang(zh) .bc-commodityhero .bc-h1 { line-height: 1.2; }

/* Dados da abertura empilhados no celular: sem o filete vertical, que ali
   sobrava na borda direita do primeiro item. */
@media (width < 48em) {
    .bc-commoditymeta__item { border-right: 0; }
}

/* Fecho com duas ações: até 1024px o par de botões reservava a coluna inteira e
   o título caía para uma palavra por linha. Empilhado, o título respira e as
   ações vêm logo abaixo. */
@media (48em <= width < 64em) {
    .bc-cta__grid:has(> .bc-actions) { grid-template-columns: 1fr; }
}

/* Ficha de commodity como dossiê --------------------------------------------- */

.bc-dossier { display: grid; gap: var(--sp-8); }

.bc-dossier__section {
    padding-block: var(--sp-6) var(--sp-7);
    border-top: 1px solid var(--line);
    scroll-margin-top: calc(var(--header-h) + var(--sp-5));
}

.bc-dossier__section:last-child { padding-bottom: 0; }

.bc-dossier__num {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-strong);
}

.bc-dossier__title {
    margin-top: var(--sp-3);
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.6rem, 1.25rem + 1.1vw, 2.25rem);
    line-height: 1.12;
}

.bc-dossier__text {
    margin-top: var(--sp-5);
    max-width: 42rem;
    font-size: 1.0625rem;
    line-height: 1.75;
}

.bc-dossier__aside { display: flex; flex-direction: column; gap: var(--sp-7); }

/* No celular o índice não serve: a página inteira cabe num polegar. */
.bc-dossier__toc { display: none; }

.bc-dossier__label {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.bc-dossier__toclist { margin-top: var(--sp-4); display: flex; flex-direction: column; }

.bc-dossier__toclink {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    padding-block: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    transition: color var(--dur-fast) var(--ease);
}

.bc-dossier__toclink:hover { color: var(--text); }

.bc-dossier__tocnum {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--accent-strong);
}

/* Chamada da ficha: plano tonal com filete bronze no topo — o mesmo plano
   das faixas alternadas, sem borda arredondada nem sombra. */
.bc-dossier__cta {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-6) var(--sp-5);
    background: var(--surface-alt);
    border-top: 2px solid var(--accent);
}

.bc-dossier__ctatitle {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.6rem;
    line-height: 1.15;
}

.bc-dossier__ctabody { font-size: var(--fs-sm); color: var(--text-muted); }

/* O botão não quebra: "Manifestar interesse" em duas linhas, numa coluna
   de 18rem, parecia rótulo de formulário e não ação. */
.bc-dossier__ctabtn { margin-top: var(--sp-3); align-self: flex-start; white-space: nowrap; padding-inline: var(--sp-5); }

@media (width >= 64em) {
    .bc-dossier {
        grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
        column-gap: clamp(var(--sp-7), 5vw, var(--sp-9));
        align-items: start;
    }

    .bc-dossier__body { grid-column: 2; grid-row: 1; }

    .bc-dossier__aside {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: calc(var(--header-h) + var(--sp-6));
    }

    .bc-dossier__toc {
        display: block;
        padding-top: var(--sp-5);
        border-top: 1px solid var(--line);
    }

    .bc-dossier__ctabtn { align-self: stretch; justify-content: space-between; }
}

/* Outros mercados, no fecho escuro da ficha. Uma linha de quatro a partir de
   768px — o modelo entrega no máximo quatro, os seguintes na ordem do catálogo. */
.bc-othermarkets { border-top: 1px solid var(--line-on-deep); }

.bc-othermarket {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--line-on-deep-soft);
    transition: background var(--dur) var(--ease);
}

.bc-othermarket:hover,
.bc-othermarket:focus-within { background: rgba(239, 237, 231, .05); }

.bc-othermarket__num {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-on-deep);
}

.bc-othermarket__name {
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem);
    line-height: 1.1;
}

.bc-othermarket__name::after { content: ""; position: absolute; inset: 0; }

.bc-othermarket__cat {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-on-deep-muted);
}

@media (width >= 48em) {
    .bc-othermarkets { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

    .bc-othermarket {
        padding: var(--sp-5) var(--sp-5) var(--sp-6);
        border-bottom: 0;
        border-right: 1px solid var(--line-on-deep-soft);
    }

    .bc-othermarket:first-child { padding-left: 0; }
    .bc-othermarket:last-child { border-right: 0; }
}

.bc-othermarket:focus-within { outline: 2px solid var(--focus-on-deep); outline-offset: -2px; }

/* Link sublinhado também acompanha a faixa escura. */
.bc-cta .bc-link { background-image: linear-gradient(var(--accent-on-deep), var(--accent-on-deep)); }

/* Artigo como publicação ------------------------------------------------------ */

.bc-article__head .bc-pagehead__title { max-width: 22ch; }

.bc-article { display: grid; gap: var(--sp-7); }

.bc-article__rail {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-5);
    padding-bottom: var(--sp-5);
    border-bottom: 1px solid var(--line);
}

.bc-article__facts { display: flex; flex-wrap: wrap; gap: var(--sp-6); }

.bc-article__fact dt {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--text-muted);
}

.bc-article__fact dd { margin-top: var(--sp-1); font-size: var(--fs-sm); }

.bc-article__rail .bc-article__back { margin-top: 0; font-size: var(--fs-sm); }

/* Corpo em serifa, na medida de leitura. O primeiro parágrafo abre um degrau
   acima, como abertura de texto em publicação. */
.bc-article__body {
    max-width: 40rem;
    font-family: var(--font-serif);
    font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
    line-height: 1.72;
    color: var(--text);
}

.bc-article__body p + p { margin-top: 1.15em; }

.bc-article__body p:first-child { font-size: 1.14em; line-height: 1.6; }

@media (width >= 64em) {
    .bc-article {
        grid-template-columns: minmax(0, 13rem) minmax(0, 40rem);
        column-gap: var(--sp-9);
        align-items: start;
    }

    .bc-article__rail {
        position: sticky;
        top: calc(var(--header-h) + var(--sp-6));
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-6);
        padding: var(--sp-5) 0 0;
        border-bottom: 0;
        border-top: 1px solid var(--line);
    }

    .bc-article__facts { flex-direction: column; gap: var(--sp-5); }
}

/* Chinês: os elementos novos em serifa e em rótulo seguem as regras da seção 28. */
:lang(zh) .bc-dossier__title,
:lang(zh) .bc-dossier__ctatitle,
:lang(zh) .bc-othermarket__name { letter-spacing: 0; line-height: 1.3; }

:lang(zh) .bc-dossier__label,
:lang(zh) .bc-othermarket__cat,
:lang(zh) .bc-article__fact dt { text-transform: none; }

:lang(zh) .bc-article__body { line-height: 1.9; }
:lang(zh) .bc-article__head .bc-pagehead__title { max-width: 18em; }

/* --------------------------------------------------------------------------
   31. FORMULÁRIO DE MANIFESTAÇÃO DE INTERESSE
   --------------------------------------------------------------------------
   Formulário à esquerda, "depois do envio" à direita e fixo — o mesmo eixo do
   dossiê da ficha. Campo com borda inteira e canto de 2px, como os botões.

   A borda do campo é #868C88 e não o filete do site: componente de interface
   precisa de 3:1 contra o fundo (WCAG 1.4.11), e o filete decorativo de 14%
   não chega a 1,5. #868C88 dá 3,4 sobre o branco do campo e 3,1 sobre o papel.
   O vermelho de erro, #A12A1E, dá 6,6 sobre o papel.
   -------------------------------------------------------------------------- */

.bc-form {
    --field-line: #868C88;
    --field-bg: #FFFEFB;
    --error: #A12A1E;

    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
    max-width: 46rem;
}

.bc-formlayout { display: grid; gap: var(--sp-8); }

@media (width >= 64em) {
    .bc-formlayout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 19rem);
        column-gap: clamp(var(--sp-7), 5vw, var(--sp-9));
        align-items: start;
    }

    .bc-formaside { position: sticky; top: calc(var(--header-h) + var(--sp-6)); }
}

/* Passos numerados: a legenda é o título de cada bloco. */
.bc-formstep {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.bc-formstep__legend {
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
    width: 100%;
    padding: 0 0 var(--sp-4);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line);
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    line-height: 1.15;
}

.bc-formstep__num {
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    letter-spacing: .18em;
    color: var(--accent-strong);
}

.bc-fieldrow { display: grid; gap: var(--sp-5); }

@media (width >= 40em) {
    .bc-fieldrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.bc-field { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }

.bc-field__label { font-size: var(--fs-sm); font-weight: 500; }

.bc-field__optional {
    margin-left: var(--sp-2);
    font-family: var(--font-mono);
    font-size: .8125rem;
    font-weight: 400;
    letter-spacing: .04em;
    color: var(--text-muted);
}

.bc-field__control {
    width: 100%;
    min-height: 3rem;
    padding: .75rem .875rem;
    font: inherit;
    font-size: 1rem;
    color: var(--text);
    background: var(--field-bg);
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
    transition: border-color var(--dur-fast) var(--ease);
}

.bc-field__control:hover { border-color: var(--text-muted); }
.bc-field__control:focus-visible { outline-offset: 1px; border-color: var(--focus); }
.bc-field__control[aria-invalid="true"] { border-color: var(--error); }

.bc-field__control--area { min-height: 9rem; resize: vertical; line-height: 1.55; }

/* Seta própria no select: a nativa muda de desenho em cada sistema. */
select.bc-field__control {
    appearance: none;
    padding-right: 2.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235E6461' stroke-width='1.4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .9rem center;
}

.bc-field__hint { font-size: .875rem; color: var(--text-muted); }

.bc-field__error { font-size: .875rem; font-weight: 500; color: var(--error); }

/* Papel: três opções-cartão. O rádio nativo fica invisível mas focável, e o
   estado aparece no cartão inteiro — borda bronze e plano tonal. */
.bc-rolepick { display: grid; gap: var(--sp-3); }

@media (width >= 40em) {
    .bc-rolepick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.bc-rolepick__item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding: var(--sp-5);
    background: var(--field-bg);
    border: 1px solid var(--field-line);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}

.bc-rolepick__item:hover { border-color: var(--text-muted); }

.bc-rolepick__item:has(:checked) {
    background: var(--surface-alt);
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.bc-rolepick__item:has(:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.bc-rolepick[aria-invalid="true"] .bc-rolepick__item { border-color: var(--error); }

.bc-rolepick__input { position: absolute; opacity: 0; width: 1px; height: 1px; }

/* Indicador do rádio, no canto: anel vazio, e ponto bronze quando escolhido. */
.bc-rolepick__item::after {
    content: "";
    position: absolute;
    top: var(--sp-5);
    right: var(--sp-5);
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--field-line);
    border-radius: 50%;
    background: var(--field-bg);
}

.bc-rolepick__item:has(:checked)::after {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 0 0 3px var(--field-bg);
}

.bc-rolepick__name {
    padding-right: var(--sp-6);
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: 1.5rem;
    line-height: 1.1;
}

.bc-rolepick__body { font-size: .9375rem; line-height: 1.5; color: var(--text-muted); }

/* Campos e orientações por papel, sem script: o :has() lê o rádio escolhido.
   Sem suporte a :has(), tudo aparece — o servidor ignora o que não é do papel. */
@supports selector(:has(*)) {
    .bc-form [data-role] { display: none; }

    .bc-form:not(:has(.bc-rolepick__input:checked)) span[data-role~="none"] { display: inline; }

    .bc-form:has(.bc-rolepick__input[value="Buyer"]:checked) .bc-fieldrow[data-role~="buyer"],
    .bc-form:has(.bc-rolepick__input[value="Seller"]:checked) .bc-fieldrow[data-role~="seller"],
    .bc-form:has(.bc-rolepick__input[value="Trader"]:checked) .bc-fieldrow[data-role~="trader"] { display: grid; }

    .bc-form:has(.bc-rolepick__input[value="Buyer"]:checked) .bc-field[data-role~="buyer"],
    .bc-form:has(.bc-rolepick__input[value="Seller"]:checked) .bc-field[data-role~="seller"],
    .bc-form:has(.bc-rolepick__input[value="Trader"]:checked) .bc-field[data-role~="trader"] { display: flex; }

    .bc-form:has(.bc-rolepick__input[value="Buyer"]:checked) span[data-role~="buyer"],
    .bc-form:has(.bc-rolepick__input[value="Seller"]:checked) span[data-role~="seller"],
    .bc-form:has(.bc-rolepick__input[value="Trader"]:checked) span[data-role~="trader"] { display: inline; }
}

/* Aceite e envio. */
.bc-formsubmit {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding-top: var(--sp-6);
    border-top: 1px solid var(--line);
}

.bc-check { display: flex; align-items: flex-start; gap: var(--sp-3); }

.bc-check__input {
    flex: none;
    width: 1.25rem;
    height: 1.25rem;
    margin: .15rem 0 0;
    accent-color: var(--bc-forest-700);
}

.bc-check__label { font-size: var(--fs-sm); }

.bc-formsubmit__actions { gap: var(--sp-5); }
.bc-formsubmit__note { font-size: var(--fs-sm); max-width: 30ch; }

@media (max-width: 36em) {
    .bc-formsubmit__actions .bc-btn { width: 100%; }
}

/* Resumo de erros no topo, com link para cada campo. Recebe o foco ao voltar
   do servidor, então quem usa leitor de tela ouve o que corrigir. */
.bc-formerrors {
    padding: var(--sp-5) var(--sp-6);
    background: #FBF1EF;
    border-left: 3px solid var(--error);
}

.bc-formerrors:focus { outline: none; }

.bc-formerrors__title { font-weight: 600; color: var(--error); }

.bc-formerrors__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    font-size: var(--fs-sm);
}

.bc-formerrors__list a { text-decoration: underline; text-underline-offset: 3px; }

/* Campo-isca: fora da tela, nunca display:none — robô que lê CSS ignora campo escondido. */
.bc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Coluna "depois do envio". */
.bc-formaside { display: flex; flex-direction: column; gap: var(--sp-7); }

.bc-formaside__block { padding-top: var(--sp-5); border-top: 1px solid var(--line); }

.bc-formaside__steps { display: flex; flex-direction: column; gap: var(--sp-4); margin-top: var(--sp-4); }

.bc-formaside__step {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: var(--sp-2);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}

.bc-formaside__num {
    padding-top: .15em;
    font-family: var(--font-mono);
    font-size: var(--fs-label);
    color: var(--accent-strong);
}

.bc-formaside__text { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-muted); }

/* Confirmação: protocolo em destaque à esquerda, próximos passos à direita. */
.bc-receipt { display: grid; gap: var(--sp-8); }

@media (width >= 64em) {
    .bc-receipt {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        column-gap: clamp(var(--sp-7), 5vw, var(--sp-9));
        align-items: start;
    }
}

.bc-receipt__protocol {
    padding: var(--sp-6);
    background: var(--surface-alt);
    border-top: 2px solid var(--accent);
}

.bc-receipt__number {
    margin-top: var(--sp-3);
    font-family: var(--font-serif);
    font-weight: 300;
    font-size: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
    line-height: 1.1;
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.bc-receipt__note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-muted); }
.bc-receipt__steps { margin-top: var(--sp-5); }
.bc-receipt__actions { margin-top: var(--sp-7); }

:lang(zh) .bc-formstep__legend,
:lang(zh) .bc-rolepick__name { letter-spacing: 0; line-height: 1.3; }
:lang(zh) .bc-field__optional { letter-spacing: 0; }