/* ============================================================
   STYLE — layout e componentes. Só consome tokens.
   Organizado por responsabilidade, nunca por página.
   Tema claro da marca: superfícies brancas, azul institucional
   como campo de destaque, amarelo/verde como acentos.
   ============================================================ */

/* --- Reset enxuto --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--fonte-texto);
    font-size: var(--texto-corpo-md);
    line-height: var(--entrelinha-corpo);
    color: var(--texto-corpo);
    background: var(--superficie);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
h1, h2, h3 { font-family: var(--fonte-display); font-weight: 400; line-height: var(--entrelinha-titulo); color: var(--texto-titulo); text-wrap: balance; }
/* CJK: em chinês os títulos caem na Noto Sans SC/TC (a Viga não tem glifos).
   O peso 400 da Viga é "gordo"; o 400 da Noto é fino — então dá-se peso só
   sob :lang(zh). Não afeta latino/Viga nem os números (dígitos ASCII em Viga). */
:lang(zh) :is(h1, h2, h3) { font-weight: 700; }
:lang(zh) .hero-interna__titulo, :lang(zh) .faixa-foto__titulo { font-weight: 900; }
/* Textos curtos com peso de título (não são <h1-3>, mas quebram como um):
   mesmo balanceamento de linha, sitewide. */
.hero__lead, .hero__cert-titulo, .summit__titulo, .insights__item-titulo { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--raio-p); }
::selection { background: var(--amarelo-100); color: var(--preto); }

/* --- Utilitários --- */
.container { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: var(--padding-lat); }
.secao { padding-block: var(--espaco-secao); }
.secao--afundada { background: var(--superficie-afundada); }
.secao--azul { background: var(--superficie-escura); color: var(--texto-sobre-escuro); }
.secao--azul h1, .secao--azul h2, .secao--azul h3 { color: var(--texto-sobre-escuro); }
/* Faixa de fechamento (CTA final) — mesmo tratamento do azul, tom verde da bandeira */
.secao--verde { background: var(--superficie-verde); color: var(--texto-sobre-escuro); }

.pular-link {
    position: absolute; left: -999px; top: 0; z-index: 1000;
    background: var(--cor-primaria); color: var(--branco);
    padding: 0.75rem 1.25rem; border-radius: 0 0 var(--raio-p) 0;
}
.pular-link:focus { left: 0; }

/* Eyebrow: label curto, caixa alta, com traço de acento */
.eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font-size: var(--texto-eyebrow); font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--cor-primaria);
}
.eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--cor-folha); border-radius: 2px; }
.secao--azul .eyebrow { color: var(--amarelo-400); }
.secao--azul .eyebrow::before { background: var(--amarelo-400); }
/* Kicker do hero claro: texto escuro, traço amarelo (código-bandeira) */
.eyebrow--sol { color: var(--cinza-700); }
.eyebrow--sol::before { background: var(--cor-sol); }

/* --- Botões --- */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    padding: 0.85rem 1.5rem; border-radius: var(--raio-pill);
    font-family: var(--fonte-texto); font-weight: var(--peso-semi); font-size: 0.95rem;
    line-height: 1; text-align: center;
    transition: background var(--transicao-rapida), color var(--transicao-rapida),
                border-color var(--transicao-rapida), transform var(--dur-rapida) var(--ease);
}
.botao:active { transform: scale(0.97); }
.botao--primaria { background: var(--cor-primaria); color: var(--branco); }
.botao--primaria:hover { background: var(--cor-primaria-hover); color: var(--branco); }
.botao--sol { background: var(--cor-sol); color: var(--preto); }
.botao--sol:hover { background: var(--amarelo-400); }
.botao--fantasma { border: 1.5px solid var(--borda-sutil); color: var(--texto-titulo); }
.botao--fantasma:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.botao--fantasma-claro { border: 1.5px solid var(--borda-escura); color: var(--branco); }
.botao--fantasma-claro:hover { border-color: var(--branco); background: rgba(255, 255, 255, 0.08); }
.botao--grande { padding: 1.05rem 2rem; font-size: 1.02rem; }

.link-seta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--cor-primaria); font-weight: var(--peso-semi);
}
.secao--azul .link-seta { color: var(--amarelo-400); }
.link-seta::after { content: "→"; transition: transform var(--transicao-rapida); }
.link-seta:hover::after { transform: translateX(4px); }

/* Chips de categoria */
.tag {
    display: inline-block; font-size: 0.75rem; font-weight: var(--peso-forte);
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.35rem 0.7rem; border-radius: var(--raio-pill);
}
.tag--azul { background: var(--cor-primaria-tint); color: var(--texto-sobre-tint); }
.tag--sol  { background: var(--cor-sol-tint); color: var(--amarelo-700); }
.tag--folha{ background: var(--cor-folha-tint); color: var(--verde-700); }

/* Cabeçalho de seção */
.secao__cabecalho { max-width: 60ch; margin-bottom: var(--espaco-bloco); }
.secao__cta { margin-top: var(--espaco-bloco); }
.secao__cabecalho--centro { margin-inline: auto; text-align: center; }
.secao__titulo { font-size: var(--texto-h2); margin-top: 1rem; }
.secao__texto { color: var(--texto-suave); margin-top: 1.1rem; font-size: var(--texto-corpo-lg); }
.secao--azul .secao__texto { color: var(--texto-sobre-escuro-suave); }

/* ============================================================
   CABEÇALHO
   ============================================================ */
.cabecalho {
    position: sticky; top: 0; z-index: var(--z-cabecalho);
    background: color-mix(in srgb, var(--branco) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--transicao-padrao), box-shadow var(--transicao-padrao), background var(--transicao-padrao);
}
.cabecalho.is-preso { border-bottom-color: var(--borda-clara); box-shadow: var(--sombra-p); background: color-mix(in srgb, var(--branco) 96%, transparent); }
.cabecalho__interno {
    max-width: var(--largura-max); margin-inline: auto;
    padding: 0.9rem var(--padding-lat);
    display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.marca { display: inline-flex; align-items: center; }
.marca img { height: 42px; width: auto; }
.nav-principal { display: flex; gap: clamp(1.25rem, 2.6vw, 2.4rem); }
.nav-principal__link {
    font-size: 0.95rem; font-weight: var(--peso-medio); color: var(--cinza-700);
    position: relative; padding-block: 0.4rem; white-space: nowrap;
    transition: color var(--transicao-rapida);
}
.nav-principal__link:hover, .nav-principal__link[aria-current="page"] { color: var(--cor-primaria); }
.nav-principal__link[aria-current="page"]::after {
    content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px;
    background: var(--cor-sol); border-radius: 2px;
}
.cabecalho__acoes { display: flex; align-items: center; gap: 1.1rem; }
.seletor-idioma { position: relative; font-size: 0.8rem; }
.seletor-idioma__gatilho {
    display: inline-flex; align-items: center; gap: 0.4rem;
    min-height: 40px; padding: 0.4rem 0.7rem; border-radius: var(--raio-p);
    color: var(--cinza-500); font-weight: var(--peso-semi); cursor: pointer;
    list-style: none; user-select: none;
    transition: color var(--transicao-rapida), background var(--transicao-rapida);
}
.seletor-idioma__gatilho::-webkit-details-marker { display: none; }
.seletor-idioma__gatilho .icone-svg { font-size: 1.05em; }
.seletor-idioma__gatilho:hover,
.seletor-idioma[open] > .seletor-idioma__gatilho { color: var(--cor-primaria); background: var(--cor-primaria-tint); }
.seletor-idioma__atual { text-transform: uppercase; }
.seletor-idioma__lista {
    position: absolute; top: calc(100% + 0.4rem); right: 0; z-index: 5;
    display: flex; flex-direction: column; gap: 0.1rem; min-width: 7rem;
    background: var(--branco); border: 1px solid var(--borda-clara); border-radius: var(--raio-m);
    box-shadow: var(--sombra-m); padding: 0.35rem;
}
.seletor-idioma__op { color: var(--cinza-500); font-weight: var(--peso-semi); padding: 0.45rem 0.6rem; border-radius: var(--raio-p); transition: color var(--transicao-rapida), background var(--transicao-rapida); }
.seletor-idioma__op:hover { color: var(--cor-primaria); background: var(--cor-primaria-tint); }
.seletor-idioma__op.is-ativo { color: var(--branco); background: var(--cor-primaria); }
/* Cópia do seletor dentro do menu mobile: só aparece com o menu aberto (responsive.css) */
.seletor-idioma--menu { display: none; }
.seletor-idioma--menu .seletor-idioma__lista { position: static; margin-top: 0.5rem; border: none; box-shadow: none; padding: 0; }
/* Eco do botão Restrito dentro do menu mobile: mesmo tratamento — some por padrão
   (já aparece via .botao--restrito em .cabecalho__acoes no desktop), só reaparece
   com o menu aberto (responsive.css), pra não duplicar na barra horizontal. */
.nav-principal__link--restrito { display: none; }
.menu-hamburguer { display: none; flex-direction: column; gap: 5px; padding: 0.5rem; }
.menu-hamburguer span { width: 24px; height: 2px; background: var(--cor-primaria); border-radius: 2px; transition: transform var(--transicao-rapida), opacity var(--transicao-rapida); }

/* ============================================================
   HERO — colagem editorial da origem sobre fundo creme
   Palco proporcional: cada peça é posicionada em % de um campo
   1150 × 810; escala fluida mantendo o layout do comp aprovado.

   Grade dos cartões: 5 colunas de largura igual (18.4%) com
   gutter constante de 2% (colunas e linhas), para que todo
   cartão e todo espaçamento entre eles siga a mesma unidade.
   ============================================================ */
.hero {
    background: var(--superficie-creme); color: var(--texto-titulo);
    overflow: hidden; padding-block: clamp(0.5rem, 1vw, 0.75rem);
}
.hero__palco {
    position: relative; aspect-ratio: 1150 / 810;
}
.hero__palco > * { margin: 0; }

/* Título central */
.hero__titulo {
    position: absolute; left: 50%; top: 0; translate: -50% 0;
    width: 62%; text-align: center;
    font-size: var(--texto-hero); color: var(--preto);
    line-height: var(--entrelinha-titulo);
}

/* Bloco kicker + lead (coluna esquerda, alto) */
.hero__bloco--lead { position: absolute; left: 0; top: 18.5%; width: 18%; }
.hero__lead {
    margin-top: 0.9rem; font-weight: var(--peso-forte);
    font-size: var(--texto-corpo-lg); line-height: 1.18; color: var(--preto);
}

/* Cartões de grãos — cantos suaves, sem sombra (planos sobre o creme) */
.hero__cartao { position: absolute; border-radius: clamp(12px, 1.4vw, 20px); overflow: hidden; }
.hero__cartao picture { display: block; width: 100%; height: 100%; }
.hero__cartao img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hero__cartao--carioca   { left: 0%;    top: 38.9%; width: 18.4%; aspect-ratio: 1; }
.hero__cartao--gergelim  { left: 20.4%; top: 28%;   width: 18.4%; height: 18%; }
.hero__cartao--produtor  { left: 20.4%; top: 48%;   width: 18.4%; height: 28%; }
.hero__cartao--mung      { left: 40.8%; top: 22%;   width: 18.4%; height: 60%; }
.hero__cartao--preto     { left: 61.2%; top: 28%;   width: 18.4%; height: 28%; }
.hero__cartao--milho     { left: 61.2%; bottom: 24%; width: 18.4%; aspect-ratio: 1.45; }
.hero__cartao--produtora { left: 81.6%; top: 38.9%; width: 18.4%; aspect-ratio: 1; }

/* Selo Trusted Company (direita, alto — alinhado à borda direita da coluna 5) */
.hero__selo { position: absolute; left: 88.7%; top: 17.3%; width: 11.3%; }
.hero__selo img { display: block; width: 100%; height: auto; }

/* Hashtag sob a exportadora (centralizada na coluna 5) */
.hero__hashtag {
    position: absolute; left: 90.8%; top: 67.5%; translate: -50% 0;
    font-size: var(--texto-peq); font-weight: var(--peso-forte);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--preto); white-space: nowrap;
}

/* Resumo (coluna esquerda, baixo) */
.hero__resumo {
    position: absolute; left: 0; top: 81%; width: 32%;
    font-size: var(--texto-corpo-lg); line-height: var(--entrelinha-corpo); color: var(--cinza-700);
}

/* Botão portfólio (centro, baixo) */
.hero__portfolio {
    position: absolute; left: 50.4%; top: 90%; translate: -50% 0;
    padding: 1rem 2.25rem; font-size: 1rem;
}

/* Bloco certificadas (direita, baixo) */
.hero__cert {
    position: absolute; left: 69.6%; top: 86%; right: 0;
    display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 1.4rem);
}
.hero__cert-titulo {
    margin-top: 0.35rem; font-weight: var(--peso-forte);
    font-size: var(--texto-corpo-lg); line-height: 1.18; color: var(--preto);
}
.hero__cert-seta {
    flex: 0 0 auto; display: grid; place-items: center;
    width: clamp(48px, 4.4vw, 64px); aspect-ratio: 1; border-radius: 50%;
    background: var(--cor-primaria); color: var(--branco);
    transition: background var(--transicao-rapida), transform var(--transicao-rapida);
}
.hero__cert-seta:hover { background: var(--cor-primaria-hover); transform: translateX(3px); }

/* --- Hero mobile: layout curado (título → grid 2×2 → resumo → botão → certificadas) --- */
@media (max-width: 960px) {
    .hero__palco {
        aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr;
        gap: var(--gap); align-items: stretch;
    }
    .hero__palco > * {
        position: static !important; inset: auto !important;
        width: auto !important; height: auto !important; translate: none !important;
    }

    /* Título à esquerda, largura total */
    .hero__titulo {
        grid-column: 1 / -1; width: auto; text-align: left;
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    /* No mobile mostramos só 4 grãos + escondemos os textos flutuantes do palco desktop */
    .hero__bloco--lead,
    .hero__cartao--gergelim,
    .hero__cartao--preto,
    .hero__cartao--milho,
    .hero__selo,
    .hero__hashtag { display: none; }

    /* Grid 2×2 com posições fixas (linha 2 = carioca|mung, linha 3 = produtor|produtora) */
    .hero__titulo            { grid-row: 1; }
    .hero__cartao            { aspect-ratio: 1; }
    .hero__cartao--carioca   { grid-column: 1; grid-row: 2; }
    .hero__cartao--mung      { grid-column: 2; grid-row: 2; }
    .hero__cartao--produtor  { grid-column: 1; grid-row: 3; }
    .hero__cartao--produtora { grid-column: 2; grid-row: 3; }

    /* Resumo, botão e certificadas ocupam a largura toda */
    .hero__resumo    { grid-column: 1 / -1; grid-row: 4; width: auto; margin-top: 0.5rem; }
    .hero__portfolio { grid-column: 1 / -1; grid-row: 5; justify-self: center; }
    .hero__cert {
        grid-column: 1 / -1; grid-row: 6; margin-top: 0.5rem;
        border-top: 1px solid var(--borda-sutil); padding-top: 1.5rem;
    }
}

/* ============================================================
   VÍDEO INSTITUCIONAL
   ============================================================ */
.video__painel {
    position: relative; margin-top: var(--espaco-bloco);
    aspect-ratio: 16 / 9; border-radius: var(--raio-g); overflow: hidden;
    background: var(--azul-700); box-shadow: var(--sombra-g);
}
.video__painel img { width: 100%; height: 100%; object-fit: cover; }
.video__play {
    position: absolute; inset: 0; margin: auto; width: clamp(66px, 8vw, 92px); height: clamp(66px, 8vw, 92px);
    display: grid; place-items: center; border-radius: var(--raio-pill);
    background: color-mix(in srgb, var(--branco) 92%, transparent); color: var(--cor-primaria);
    box-shadow: var(--sombra-g); transition: transform var(--transicao-rapida), background var(--transicao-rapida);
}
.video__play::before { content: ""; border-style: solid; border-width: 12px 0 12px 20px; border-color: transparent transparent transparent currentColor; margin-left: 5px; }
.video__play:hover { transform: scale(1.06); background: var(--branco); }
.video__legenda { position: absolute; left: 1.25rem; bottom: 1.1rem; color: var(--branco); font-weight: var(--peso-semi); font-size: 0.85rem; background: color-mix(in srgb, var(--azul-700) 70%, transparent); padding: 0.4rem 0.8rem; border-radius: var(--raio-pill); backdrop-filter: blur(4px); }

/* ============================================================
   BENTO — 3 grandes linhas comerciais
   ============================================================ */
.bento {
    display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--gap);
}
.bento__item {
    position: relative; display: flex; flex-direction: column;
    background: var(--superficie-cartao); border-radius: var(--raio-g); overflow: hidden;
    box-shadow: var(--sombra-m); transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
    min-height: 240px;
}
.bento__item:first-child { grid-row: 1 / 3; }
.bento__item:hover { transform: translateY(-6px); box-shadow: var(--sombra-g); }
.bento__img { position: relative; flex: 1 1 auto; min-height: 150px; overflow: hidden; background: var(--cinza-100); }
.bento__img img { width: 100%; height: 100%; object-fit: cover; }
.bento__corpo { padding: clamp(1.25rem, 2vw, 1.75rem); }
.bento__item:first-child .bento__corpo { padding: clamp(1.5rem, 2.5vw, 2.25rem); }
.bento__titulo { font-size: var(--texto-h3); margin: 0.75rem 0 0.5rem; }
.bento__item:first-child .bento__titulo { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.bento__desc { color: var(--texto-suave); font-size: 0.98rem; }

/* ============================================================
   WHY BRAZIL CARROSSEL — trilho horizontal com os 10 destaques
   de /why-brazil + card CTA. Trilho sangra até a borda da viewport
   (fora do .container) para reforçar a leitura de "role para ver mais".
   Setas + roda do mouse + arrasto (main.js) fazem o trilho andar;
   a máscara de borda e o cursor de arrasto sinalizam que é interativo.
   ============================================================ */
.why-carrossel__cabecalho {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: var(--space-5); flex-wrap: wrap;
    margin-bottom: var(--espaco-bloco);
}
.why-carrossel__intro { max-width: 62ch; }
.why-carrossel__setas { display: flex; gap: var(--space-3); flex: none; }
.why-carrossel__seta {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; flex: none;
    border: 1px solid var(--borda-sutil); border-radius: var(--raio-pill);
    background: var(--superficie-cartao); color: var(--cor-primaria);
    font-size: 1.2rem; cursor: pointer;
    transition: var(--transicao-padrao);
}
.why-carrossel__seta:hover { background: var(--cor-primaria); color: var(--branco); border-color: var(--cor-primaria); transform: translateY(-3px); }
.why-carrossel__seta:disabled { opacity: 0.32; cursor: default; transform: none; background: var(--superficie-cartao); color: var(--cor-primaria); border-color: var(--borda-sutil); }

.why-carrossel__trilho {
    position: relative;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
    scroll-padding-inline-start: max(var(--padding-lat), calc((100% - var(--largura-max)) / 2 + var(--padding-lat)));
    padding-block: var(--space-3) var(--space-7);
    scrollbar-width: none;
    cursor: grab;
    -webkit-mask-image: linear-gradient(to right, transparent 0, black var(--padding-lat), black calc(100% - var(--padding-lat)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, black var(--padding-lat), black calc(100% - var(--padding-lat)), transparent 100%);
}
.why-carrossel__trilho::-webkit-scrollbar { display: none; }
.why-carrossel__trilho.is-arrastando { cursor: grabbing; scroll-snap-type: none; }
.why-carrossel__pista {
    display: flex; align-items: flex-start; gap: var(--space-5);
    padding-inline-start: max(var(--padding-lat), calc((100% - var(--largura-max)) / 2 + var(--padding-lat)));
    padding-inline-end: var(--padding-lat);
    width: max-content;
}

.why-card {
    scroll-snap-align: start;
    position: relative; overflow: hidden;
    display: flex; flex-direction: column;
    width: clamp(230px, 27vw, 296px); flex: none;
    padding: var(--space-6) var(--space-5);
    background: var(--superficie-cartao);
    border: 1px solid transparent;
    border-radius: var(--raio-g);
    box-shadow: var(--sombra-p);
    transition: var(--transicao-padrao);
    user-select: none;
}
/* Ritmo escalonado: cards pares descem, ímpares sobem — quebra a grade reta */
.why-card:nth-child(even) { margin-top: var(--space-7); }
.why-card:nth-child(3n) { margin-top: var(--space-3); }
.why-card:hover { box-shadow: var(--sombra-g); transform: translateY(-6px); }

.why-card__marca {
    position: absolute; top: var(--space-4); right: var(--space-4);
    width: clamp(48px, 6vw, 68px); aspect-ratio: 264 / 258;
    -webkit-mask: url("/imagens/marca/marks/folha-esq.svg") center / contain no-repeat;
    mask: url("/imagens/marca/marks/folha-esq.svg") center / contain no-repeat;
    opacity: 0.16;
}
.why-card__indice { position: relative; font-family: var(--fonte-display); font-size: 0.85rem; letter-spacing: 0.12em; opacity: 0.6; }
.why-card__valor { position: relative; font-family: var(--fonte-display); font-size: var(--texto-numero); line-height: 0.92; margin-top: var(--space-3); white-space: nowrap; }
.why-card__valor small { font-size: 0.32em; font-weight: 600; opacity: 0.68; }
.why-card__label { position: relative; font-weight: var(--peso-semi); font-size: 0.85rem; margin-top: var(--space-2); }
.why-card__titulo { position: relative; font-size: 1.05rem; margin-top: auto; padding-top: var(--space-6); }

.why-card--azul { background: var(--azul-100); }
.why-card--azul .why-card__indice, .why-card--azul .why-card__valor, .why-card--azul .why-card__label { color: var(--cor-primaria); }
.why-card--azul .why-card__titulo { color: var(--texto-titulo); }
.why-card--azul .why-card__marca { background: var(--cor-primaria); }

.why-card--sol { background: var(--amarelo-100); }
.why-card--sol .why-card__indice, .why-card--sol .why-card__valor, .why-card--sol .why-card__label { color: var(--amarelo-700); }
.why-card--sol .why-card__titulo { color: var(--texto-titulo); }
.why-card--sol .why-card__marca { background: var(--amarelo-700); }

.why-card--folha { background: var(--verde-100); }
.why-card--folha .why-card__indice, .why-card--folha .why-card__valor, .why-card--folha .why-card__label { color: var(--cor-folha); }
.why-card--folha .why-card__titulo { color: var(--texto-titulo); }
.why-card--folha .why-card__marca { background: var(--cor-folha); }

/* Card 11: CTA — quebra o ritmo numérico, chama para /why-brazil */
.why-card--cta {
    justify-content: space-between;
    background: linear-gradient(155deg, var(--azul-700) 0%, var(--azul-600) 65%, var(--cor-folha) 145%);
    color: var(--texto-sobre-escuro);
    margin-top: var(--space-4);
}
.why-card--cta .why-card__cta-num {
    position: relative; font-family: var(--fonte-display); font-size: var(--texto-numero);
    color: var(--cor-sol); line-height: 0.9;
}
.why-card--cta .why-card__cta-texto { position: relative; font-family: var(--fonte-display); font-size: 1.3rem; line-height: 1.25; margin-top: var(--space-4); }
.why-card--cta .why-card__cta-seta {
    align-self: flex-end;
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin-top: var(--space-5);
    border-radius: var(--raio-pill); background: var(--cor-sol); color: var(--preto);
    font-size: 1.2rem;
    transition: var(--transicao-padrao);
}
.why-card--cta:hover { transform: translateY(-6px); }
.why-card--cta:hover .why-card__cta-seta { transform: translateX(4px); }

/* ============================================================
   NÚMEROS — faixa azul, KPIs oficiais 2025
   ============================================================ */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: var(--espaco-bloco); }
.kpi { padding-top: 1.5rem; border-top: 2px solid rgba(255, 255, 255, 0.25); }
.kpi__valor { font-family: var(--fonte-display); font-size: var(--texto-numero); color: var(--amarelo-400); line-height: 1; white-space: nowrap; }
.kpi__valor em { font-style: normal; color: var(--amarelo-400); }
.kpi__valor small { font-size: 0.32em; font-weight: 600; letter-spacing: 0.01em; color: var(--branco); }
.kpi__label { color: var(--texto-sobre-escuro-suave); margin-top: 0.75rem; font-size: 0.95rem; max-width: 24ch; }
.kpis__nota { margin-top: var(--espaco-bloco); color: var(--texto-sobre-escuro-suave); max-width: 70ch; font-size: 0.95rem; }

/* ============================================================
   FORNECEDORES — chamada + painel de destaque
   ============================================================ */
.forn { display: grid; grid-template-columns: 1fr 0.9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.forn__acoes { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.9rem; }
.forn__painel { background: var(--cor-primaria-tint); border-radius: var(--raio-g); padding: clamp(1.75rem, 3vw, 2.75rem); display: grid; grid-template-columns: 6fr 5fr; align-items: center; gap: clamp(1.25rem, 3vw, 2rem); }
.forn__num { font-family: var(--fonte-display); font-size: clamp(3rem, 7vw, 4.5rem); color: var(--cor-primaria); line-height: 1; }
.forn__num-label { color: var(--texto-sobre-tint); font-weight: var(--peso-semi); }
.forn__ufs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.forn__uf { background: var(--branco); color: var(--cor-primaria); font-weight: var(--peso-forte); font-size: 0.75rem; padding: 0.35rem 0.65rem; border-radius: var(--raio-pill); box-shadow: var(--sombra-p); }
/* Quebra de linha forçada (sem viúva) — flex-basis:100% empurra os itens
   seguintes pra próxima linha, ver indices_quebra_sem_orfao() em functions.php. */
.forn__uf-quebra { flex-basis: 100%; width: 0; height: 0; }

/* Logo dos associados: crossfade no mesmo lugar, ocupando a coluna direita do painel.
   Ciclo = nº de logos × 3s; ajustar --forn-logo-slot se a quantidade de associados mudar. */
.forn__logos { --forn-logo-slot: 3s; --forn-logo-total: 18; position: relative; height: clamp(6rem, 14vw, 9rem); }
.forn__logos-item {
    position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; width: auto; height: auto;
    object-fit: contain; opacity: 0;
    animation: forn-logo-fade calc(var(--forn-logo-slot) * var(--forn-logo-total)) ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * var(--forn-logo-slot) * -1);
}
@keyframes forn-logo-fade {
    0%, 100% { opacity: 0; }
    1.2% { opacity: 1; }
    5.5% { opacity: 1; }
    6.7% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .forn__logos-item { animation: none; opacity: 0; }
    .forn__logos-item:first-child { opacity: 1; }
}

/* ============================================================
   EVENTOS — agenda global, cartões split com foto sangrada.
   A foto é coluna de grid colada nas bordas do cartão (topo,
   direita e base); o overflow hidden recorta nos cantos
   arredondados. Texto carrega o padding, foto nunca.
   ============================================================ */
.eventos-grade { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.evento {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--foto-evento);
    min-height: 200px;
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    overflow: hidden;
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
}
.evento:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); }
.evento__corpo { display: flex; flex-direction: column; gap: 0.5rem; padding: var(--pad-agenda); }
.evento__media { display: block; background: var(--cinza-100); }
.evento__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transicao-padrao);
}
.evento:hover .evento__media img { transform: scale(1.05); }
.evento__data {
    display: inline-block; align-self: flex-start;
    padding: 0.3rem 0.7rem; border-radius: var(--raio-pill);
    background: var(--cor-primaria-tint); color: var(--cor-primaria);
    font-weight: var(--peso-forte); font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase;
}
.evento__titulo { font-family: var(--fonte-display); font-size: 1.3rem; margin-top: 0.25rem; }
.evento__local { color: var(--texto-suave); font-size: 0.95rem; }
.summit {
    display: grid; grid-template-columns: minmax(0, 1fr) var(--foto-summit);
    margin-top: var(--gap);
    background: var(--cor-sol); color: var(--preto); border-radius: var(--raio-g);
    overflow: hidden;
}
.summit__corpo {
    display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1rem; padding: var(--pad-agenda);
}
.summit__titulo { font-family: var(--fonte-display); font-size: var(--texto-h2); max-width: 26ch; }
/* Data do destaque: caixa preta/branca (maior que o chip padrão dos
   cards) pra se destacar sobre o fundo amarelo do bloco Summit. */
.summit .evento__data {
    background: var(--preto); color: var(--branco);
    font-size: 0.95rem; padding: 0.4rem 0.9rem;
}
/* Estrela em glifo de texto (★), não emoji (⭐) — emoji tem cor fixa própria
   e ignora `color`; o glifo de texto herda currentColor, então pode ficar preto. */
.estrela-destaque { color: var(--preto); }
/* Sem o traço decorativo do .eyebrow aqui: estrela + rótulo alinham à
   esquerda com o H1 abaixo, em vez do recuo do traço + gap padrão. */
.summit .eyebrow--sol::before { content: none; }
.summit .secao__texto { color: var(--preto); margin-top: 0; }
.summit .botao--primaria { background: var(--preto); }
.summit .botao--primaria:hover { background: var(--cinza-700); }
.summit__media { display: block; background: var(--cinza-100); }
.summit__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--transicao-padrao);
}
.summit:hover .summit__media img { transform: scale(1.03); }

/* ============================================================
   MARKET INSIGHTS — lista editorial
   ============================================================ */
.insights { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.insights__lista { display: flex; flex-direction: column; }
.insights__item { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 1.35rem 0; border-top: 1px solid var(--borda-clara); transition: color var(--transicao-rapida); }
.insights__item:last-of-type { border-bottom: 1px solid var(--borda-clara); }
.insights__item:hover { color: var(--cor-primaria); }
.insights__item-titulo { font-family: var(--fonte-display); font-size: 1.15rem; color: inherit; }
.insights__item-seta { color: var(--cor-primaria); font-size: 1.2rem; }
.insights__link { margin-top: 1.5rem; text-align: right; }

/* ============================================================
   CTA FINAL
   ============================================================ */
.cta-final { text-align: center; }
.cta-final h2 { font-size: var(--texto-h1); max-width: 42ch; margin-inline: auto; color: var(--branco); }
.cta-final p { color: var(--texto-sobre-escuro-suave); margin: 1.25rem auto 2.25rem; max-width: 52ch; font-size: var(--texto-corpo-lg); }

/* Estado vazio (defesa de dados do admin) */
.estado-vazio { text-align: center; color: var(--texto-suave); padding: 3rem; border: 1px dashed var(--borda-sutil); border-radius: var(--raio-m); }

/* ============================================================
   MARCAS DECORATIVAS — parallax/flutuação (só transform).
   Recorte por máscara: a cor vem de currentColor, então a mesma
   peça pode ser tingida conforme a superfície onde repousa.
   O deslocamento de parallax é aplicado por main.js (inline transform).
   ============================================================ */
.deco {
    position: absolute; pointer-events: none; z-index: 0;
    -webkit-mask: var(--m) center / contain no-repeat;
    mask: var(--m) center / contain no-repeat;
    background: currentColor;
    will-change: transform;
}

/* ============================================================
   PÁGINAS INTERNAS · MINI-HERO — faixa compacta sob o menu (creme)
   Reutilizado por todas as internas via includes/hero-interna.php
   ============================================================ */
.hero-interna {
    position: relative; overflow: hidden;
    background: var(--superficie-creme); color: var(--texto-titulo);
    padding-block: clamp(2.5rem, 6vw, 4.5rem);
    border-bottom: 1px solid var(--borda-clara);
}
.hero-interna__grade {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.5fr 0.9fr;
    gap: clamp(1.5rem, 4vw, 3rem); align-items: end;
}
.hero-interna__titulo { font-size: var(--texto-h1); color: var(--preto); margin-top: 1rem; }
.hero-interna__lead { margin-top: 1.1rem; max-width: 46ch; color: var(--cinza-700); font-size: var(--texto-corpo-lg); }
.hero-interna__kpi { justify-self: end; text-align: right; border-top: 2px solid var(--cor-sol); padding-top: 1rem; max-width: 24ch; }
.hero-interna__kpi-valor { font-family: var(--fonte-display); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--cor-primaria); line-height: 1; white-space: nowrap; }
.hero-interna__kpi-valor small { font-size: 0.34em; font-weight: 600; color: var(--cinza-700); }
.hero-interna__kpi-label { margin-top: 0.6rem; color: var(--texto-suave); font-size: 0.9rem; }

.hero-interna__sorriso {
    --m: url("/imagens/marca/marks/sorriso.svg");
    right: -6%; top: 26%; width: clamp(220px, 40vw, 560px); aspect-ratio: 511 / 281;
    color: var(--cor-primaria); opacity: 0.06;
}
.hero-interna__bola {
    --m: url("/imagens/marca/marks/bola.svg");
    left: 45%; bottom: -22%; width: clamp(64px, 8vw, 120px); aspect-ratio: 1;
    color: var(--cor-sol); opacity: 0.5;
}

/* ============================================================
   PAINEL BI PÚBLICO — chamada + iframe (ex.: Exportações Brasileiras
   em /market-insights). Cartão branco elevado sobre faixa escura;
   mesma lógica de moldura 16:9 do .membros-painel__moldura da área
   restrita, reproduzida aqui porque membros.css não carrega em páginas
   públicas.
   ============================================================ */
.painel-bi__grade {
    display: grid; grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.painel-bi__texto { max-width: 42ch; }
.painel-bi__cta { margin-top: 1.5rem; }
.painel-bi__moldura {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    border-radius: var(--raio-g); overflow: hidden;
    box-shadow: var(--sombra-g); background: var(--branco);
}
/* Iframe é só preview (pointer-events desligado); o gatilho transparente por
   cima é quem recebe clique e foco de teclado — ver comentário no PHP. */
.painel-bi__moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.painel-bi__gatilho {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; padding: 1rem; cursor: pointer; background: color-mix(in srgb, var(--azul-700) 0%, transparent);
    display: flex; align-items: flex-end; justify-content: flex-end;
    transition: background var(--transicao-padrao);
}
.painel-bi__gatilho:hover, .painel-bi__gatilho:focus-visible { background: color-mix(in srgb, var(--azul-700) 14%, transparent); }
.painel-bi__gatilho:focus-visible { outline: 2px solid var(--cor-sol); outline-offset: -2px; }
.painel-bi__expandir {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--branco); color: var(--cor-primaria); box-shadow: var(--sombra-m);
    transition: transform var(--transicao-padrao);
}
.painel-bi__gatilho:hover .painel-bi__expandir { transform: scale(1.08); }

/* Lightbox do painel BI: <dialog> nativo (foco preso e Esc-para-fechar de
   graça). O iframe só ganha src na abertura — evita 2 embeds pesados
   simultâneos e o relatório fica de fato pausado com o painel fechado.
   Quase tela cheia (não 16:9): o canvas do Power BI é mais alto que largo
   por causa dos filtros no topo, então a moldura ocupa o espaço restante do
   flex em vez de seguir uma proporção fixa — sobra menos scroll interno. */
.lightbox-bi {
    position: fixed; inset: 0; margin: auto;
    flex-direction: column; gap: 0.75rem;
    width: min(96vw, 1680px); height: min(92vh, 920px);
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 0; border-radius: var(--raio-g); box-shadow: var(--sombra-g);
    background: var(--branco);
}
/* display:flex só entra junto com [open]: o seletor de classe sozinho tem
   especificidade maior que "dialog { display: none }" da UA e manteria o
   lightbox visível (cobrindo a página) mesmo fechado. */
.lightbox-bi[open] { display: flex; }
.lightbox-bi::backdrop { background: color-mix(in srgb, var(--azul-700) 72%, transparent); }
.lightbox-bi__moldura {
    position: relative; flex: 1 1 auto; min-height: 0; width: 100%;
    border-radius: var(--raio-m); overflow: hidden; background: var(--cinza-50);
}
.lightbox-bi__moldura iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Com o lightbox quase em tela cheia não sobra margem ao redor para o botão
   flutuar do lado de fora (offset negativo some fora da viewport dependendo
   da altura da tela) — por isso fica ancorado por dentro do canto, com
   sombra forte para se destacar sobre o conteúdo do relatório embaixo. */
.lightbox-bi__fechar {
    position: absolute; top: 0.75rem; right: 0.75rem; z-index: 3;
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.75rem; height: 2.75rem; border-radius: 50%;
    background: var(--preto); color: var(--branco); border: 0; cursor: pointer;
    box-shadow: var(--sombra-g); transition: transform var(--transicao-padrao);
}
.lightbox-bi__fechar:hover, .lightbox-bi__fechar:focus-visible { transform: scale(1.08); }

/* ============================================================
   PILARES EDITORIAIS (Why Brazil) — linhas alternadas, número
   âncora em display + índice. As marcas fazem parallax entre as linhas.
   ============================================================ */
.pilares-secao { position: relative; overflow: hidden; }
.pilares__intro { max-width: 60ch; margin-bottom: var(--espaco-bloco); }
.pilares { position: relative; display: flex; flex-direction: column; gap: clamp(2rem, 5vw, 3.5rem); }

.pilar {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(1.5rem, 5vw, 4rem);
    align-items: center;
    padding-top: clamp(1.5rem, 4vw, 2.5rem); border-top: 1px solid var(--borda-clara);
}
/* Alternância: o número troca de lado; o texto permanece alinhado à esquerda (leitura). */
.pilar--dir .pilar__num-zona { order: 2; align-items: flex-end; text-align: right; }

.pilar__num-zona { display: flex; flex-direction: column; gap: 0.55rem; }
.pilar__valor { font-family: var(--fonte-display); font-size: clamp(2.8rem, 7vw, 5rem); color: var(--cor-primaria); line-height: 0.95; white-space: nowrap; }
.pilar__valor small { font-size: 0.3em; font-weight: 600; color: var(--cinza-700); }
.pilar__valor-label { color: var(--texto-suave); font-size: 0.92rem; max-width: 26ch; }

.pilar__texto-zona { min-width: 0; }
.pilar__indice { font-family: var(--fonte-display); font-size: 0.95rem; letter-spacing: 0.12em; color: var(--texto-suave); }
.pilar__titulo { font-size: clamp(1.4rem, 2.6vw, 2rem); margin-top: 0.35rem; }
.pilar__desc { color: var(--texto-corpo); margin-top: 0.9rem; max-width: 54ch; }

/* Pilar qualitativo (slot de número pronto): folha da marca + tag de status */
.pilar__folha-mark {
    width: clamp(56px, 7vw, 92px); aspect-ratio: 264 / 258;
    -webkit-mask: url("/imagens/marca/marks/folha-esq.svg") center / contain no-repeat;
    mask: url("/imagens/marca/marks/folha-esq.svg") center / contain no-repeat;
    background: var(--cor-folha); opacity: 0.9;
}
.pilar__tag-slot {
    display: inline-block; margin-top: 0.4rem;
    font-size: 0.72rem; font-weight: var(--peso-forte); letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--verde-700); background: var(--cor-folha-tint);
    padding: 0.35rem 0.7rem; border-radius: var(--raio-pill);
}

/* Marcas decorativas espalhadas na trilha dos pilares (parallax) */
.pilares__bola-a { --m: url("/imagens/marca/marks/bola.svg");     right: -4%; top: 10%;  width: clamp(90px, 12vw, 190px); aspect-ratio: 1; color: var(--cor-primaria); opacity: 0.05; }
.pilares__bola-b { --m: url("/imagens/marca/marks/bola.svg");     left: -5%;  top: 54%;  width: clamp(70px, 9vw, 140px);  aspect-ratio: 1; color: var(--cor-sol); opacity: 0.10; }
.pilares__bola-c { --m: url("/imagens/marca/marks/bola.svg");     left: -4%;  top: 20%;  width: clamp(80px, 10vw, 160px); aspect-ratio: 1; color: var(--cor-primaria); opacity: 0.05; }
.pilares__folha  { --m: url("/imagens/marca/marks/folha-dir.svg"); right: 1%; bottom: 4%; width: clamp(80px, 11vw, 170px); aspect-ratio: 131 / 128; color: var(--cor-folha); opacity: 0.10; }
.pilares__folha-b{ --m: url("/imagens/marca/marks/folha-esq.svg"); right: -3%; top: 62%;  width: clamp(90px, 12vw, 180px); aspect-ratio: 264 / 258; color: var(--cor-folha); opacity: 0.09; }

/* ============================================================
   FAIXA MARCO 2025 — respiro azul editorial entre os pilares
   ============================================================ */
.faixa-marco { position: relative; overflow: hidden; }
.faixa-marco__frase {
    position: relative; z-index: 1; max-width: 26ch;
    font-family: var(--fonte-display); font-size: clamp(1.6rem, 3.6vw, 2.8rem);
    line-height: 1.14; color: var(--branco);
}
.faixa-marco__frase em { font-style: normal; color: var(--amarelo-400); }
.faixa-marco__folha {
    --m: url("/imagens/marca/marks/folha-esq.svg");
    right: 4%; top: 50%; translate: 0 -50%;
    width: clamp(140px, 22vw, 320px); aspect-ratio: 264 / 258;
    color: var(--branco); opacity: 0.08;
}

/* ============================================================
   CTA FINAL (interna) — faixa verde + assinatura da marca
   ============================================================ */
.cta-why { position: relative; overflow: hidden; }
.cta-final__acoes { display: flex; flex-wrap: wrap; gap: 0.9rem; justify-content: center; }
.cta-why__sorriso {
    --m: url("/imagens/marca/marks/sorriso.svg");
    left: 50%; bottom: -34%; translate: -50% 0; rotate: 180deg;
    width: clamp(300px, 60vw, 700px); aspect-ratio: 511 / 281;
    color: var(--branco); opacity: 0.07;
}

/* ============================================================
   BANDAS FOTOGRÁFICAS (Why Brazil) — separadores full-bleed:
   imagem de fundo em parallax lento + marcas sólidas (sem
   transparência, código-bandeira) atravessando em velocidades
   diferentes + H1 forte sobre scrim.
   ============================================================ */
.faixa-foto {
    position: relative; overflow: visible; z-index: 2;
    min-height: clamp(340px, 52vh, 560px);
    display: grid; align-items: center;
    background: var(--azul-700);
}
/* Caixa de recorte: a FOTO fica contida no retângulo da banda (overflow hidden
   próprio), enquanto as marcas podem sangrar para fora dela. Camadas: foto (0)
   < scrim (1) < marcas (2) < texto (3). */
.faixa-foto__fundo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.faixa-foto__img { position: absolute; left: 0; right: 0; top: -20%; height: 140%; display: block; }
.faixa-foto__img img { width: 100%; height: 100%; object-fit: cover; }
.faixa-foto__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(15, 17, 45, 0.30) 0%, rgba(15, 17, 45, 0.18) 42%, rgba(15, 17, 45, 0.58) 100%);
}
.faixa-foto .container { position: relative; z-index: 3; text-align: center; }
.faixa-foto__titulo {
    font-size: clamp(2rem, 6vw, 4.4rem); color: var(--branco);
    max-width: 18ch; margin-inline: auto; line-height: 1.05;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

/* Marcas sólidas: acima do scrim, abaixo do texto; nas laterais para não
   comprometer a leitura do H1 central. Velocidades definidas por data-parallax. */
.faixa-foto .deco { z-index: 2; }
.faixa-foto__m1 { --m: url("/imagens/marca/marks/bola.svg");      width: clamp(90px, 14vw, 220px); aspect-ratio: 1;       color: var(--azul-600); }
.faixa-foto__m2 { --m: url("/imagens/marca/marks/folha-dir.svg"); width: clamp(80px, 12vw, 190px); aspect-ratio: 131 / 128; color: var(--verde-600); }
.faixa-foto__m3 { --m: url("/imagens/marca/marks/bola.svg");      width: clamp(56px, 8vw, 120px);  aspect-ratio: 1;       color: var(--amarelo-500); }

/* Arranjo das marcas — princípio de segurança: sangram só para BAIXO (sobre o
   padding superior da seção seguinte, sempre livre de texto); na horizontal
   ficam contidas (foto é full-bleed). O topo nunca invade a seção anterior.
   O curso do parallax é limitado por um teto no main.js. */
/* Banda A · a terra → seção clara abaixo (todas as cores contrastam) */
.faixa-foto--a .faixa-foto__m1 { left: 3%;   bottom: -8%; }
.faixa-foto--a .faixa-foto__m2 { right: 6%;  bottom: -12%; }
.faixa-foto--a .faixa-foto__m3 { right: 25%; bottom: -4%; }
/* Banda B · o mundo → CTA verde abaixo: folha verde some no verde, então fica
   DENTRO da foto; só as bolas (azul/amarela) sangram para o verde */
.faixa-foto--b .faixa-foto__m1 { right: 3%;  bottom: -8%; }
.faixa-foto--b .faixa-foto__m3 { left: 24%;  bottom: -6%; }
.faixa-foto--b .faixa-foto__m2 { left: 5%;   top: 20%; }
/* Banda C · o dado da cadeia (/contact) → seção afundada clara abaixo, mesmo
   comportamento da banda A: espelhada para não repetir o arranjo dela. */
.faixa-foto--c .faixa-foto__m1 { right: 4%;  bottom: -8%; }
.faixa-foto--c .faixa-foto__m2 { left: 5%;   bottom: -12%; }
.faixa-foto--c .faixa-foto__m3 { left: 26%;  bottom: -4%; }
/* Banda D · o dado gergelim × feijão (/products) → seção afundada clara acima
   e seção clara abaixo; arranjo cruzado (folha no topo como a banda B) para não
   repetir nem A nem C. */
.faixa-foto--d .faixa-foto__m1 { left: 6%;   bottom: -10%; }
.faixa-foto--d .faixa-foto__m2 { right: 8%;  top: 18%; }
.faixa-foto--d .faixa-foto__m3 { right: 28%; bottom: -6%; }
/* Banda E · do campo ao porto (home) → seção clara acima e abaixo, como A/C;
   arranjo distinto: bola grande sobe à esquerda embaixo, folha fica DENTRO da
   foto no alto à direita (não sangra), bola pequena desce à direita — nenhuma
   das três repete a combinação de lado+posição de A, B, C ou D. */
.faixa-foto--e .faixa-foto__m1 { left: 4%;   bottom: -9%; }
.faixa-foto--e .faixa-foto__m2 { right: 7%;  top: 16%; }
.faixa-foto--e .faixa-foto__m3 { right: 22%; bottom: -5%; }

/* Variante do título quando o texto é um DADO (frase longa com números em
   <strong>): mais largura de linha e corpo menor que o título-manchete, senão
   a frase estoura o retângulo da banda no mobile. */
.faixa-foto__titulo--dado {
    max-width: 34ch; font-size: clamp(1.45rem, 3.4vw, 2.7rem); line-height: 1.16;
    text-wrap: balance;
}
.faixa-foto__titulo--dado strong { color: var(--amarelo-400); font-weight: inherit; }

/* ============================================================
   ABOUT (/about) — página institucional. Reaproveita mini-hero,
   .kpis (números 2025), .cta-final e as marcas decorativas.
   Blocos próprios: missão (texto + painel de destaque), parceiros
   fundadores e pilares de certificação.
   ============================================================ */

/* Missão · foto editorial à esquerda, texto + painel de destaque à direita */
.missao-secao { position: relative; overflow: hidden; }
.missao { position: relative; z-index: 1; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: stretch; }
.missao__bola { --m: url("/imagens/marca/marks/bola.svg"); right: -3%; top: 12%; width: clamp(90px, 12vw, 180px); aspect-ratio: 1; color: var(--cor-primaria); opacity: 0.05; }
.missao__foto { border-radius: var(--raio-g); overflow: hidden; min-height: 360px; box-shadow: var(--sombra-p); }
.missao__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.missao__corpo { display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2.5rem); }
.missao__painel { background: var(--cor-primaria-tint); border-radius: var(--raio-g); padding: clamp(1.75rem, 3vw, 2.5rem); }
.missao__destaque { padding-bottom: 1.5rem; border-bottom: 1px solid color-mix(in srgb, var(--cor-primaria) 18%, transparent); }
.missao__num { font-family: var(--fonte-display); font-size: clamp(2.8rem, 6vw, 4.2rem); color: var(--cor-primaria); line-height: 1; white-space: nowrap; }
.missao__num small { font-size: 0.32em; font-weight: 600; color: var(--cinza-700); }
.missao__num-label { color: var(--texto-sobre-tint); margin-top: 0.6rem; font-size: 0.95rem; max-width: 26ch; }
.missao__focos { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.foco { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem; align-items: start; }
.foco__mark {
    margin-top: 0.15rem; width: clamp(26px, 3vw, 34px); aspect-ratio: 131 / 128; flex: none;
    -webkit-mask: url("/imagens/marca/marks/folha-dir.svg") center / contain no-repeat;
    mask: url("/imagens/marca/marks/folha-dir.svg") center / contain no-repeat;
    background: var(--cor-folha);
}
.foco__titulo { font-weight: var(--peso-forte); color: var(--texto-titulo); }
.foco__texto { color: var(--texto-sobre-tint); font-size: 0.95rem; margin-top: 0.15rem; }

/* Parceiros fundadores · dois cartões de igual peso (governança conjunta) */
.fundadores { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.fundador {
    position: relative; background: var(--superficie-cartao); border: 1px solid var(--borda-clara);
    border-radius: var(--raio-g); padding: clamp(1.75rem, 3vw, 2.75rem); box-shadow: var(--sombra-p);
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
}
.fundador:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); }
.fundador__logo { display: block; height: clamp(28px, 3.4vw, 38px); width: auto; max-width: 60%; margin-bottom: 1.5rem; object-fit: contain; object-position: left center; }
.fundador__papel { font-size: var(--texto-h3); font-weight: var(--peso-semi); color: var(--cor-primaria); }
.fundador__desc { color: var(--texto-suave); margin-top: 0.9rem; }

/* Números 2025 (faixa azul) — só ajustes locais; grid vem de .kpis/.kpi */
.numeros-secao { position: relative; overflow: hidden; }
.numeros__folha { --m: url("/imagens/marca/marks/folha-esq.svg"); right: 3%; top: 50%; translate: 0 -50%; width: clamp(120px, 20vw, 280px); aspect-ratio: 264 / 258; color: var(--branco); opacity: 0.07; }

/* Certificações · selo + três pilares inegociáveis */
.certs-secao { position: relative; overflow: hidden; }
.certs__bola { --m: url("/imagens/marca/marks/bola.svg"); left: -4%; bottom: 6%; width: clamp(90px, 12vw, 170px); aspect-ratio: 1; color: var(--cor-sol); opacity: 0.10; }
.certs__selo { width: clamp(72px, 9vw, 104px); height: auto; margin: 0 auto 1.25rem; }
.certs { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.cert {
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    padding: clamp(1.5rem, 2.5vw, 2.25rem); text-align: center;
}
.cert__mark { display: block; width: clamp(48px, 5.5vw, 62px); height: auto; margin: 0 auto 1.1rem; }
.cert__titulo { font-size: var(--texto-h3); }
.cert__desc { color: var(--texto-suave); margin-top: 0.75rem; font-size: 0.98rem; }

/* ============================================================
   RODAPÉ — 5 colunas, campo azul
   ============================================================ */
.rodape { background: var(--superficie-escura); color: var(--texto-sobre-escuro); }
.rodape__interno {
    max-width: var(--largura-max); margin-inline: auto; padding: var(--espaco-bloco) var(--padding-lat);
    display: grid; grid-template-columns: 1.7fr 1fr 1fr 0.7fr 1fr; gap: var(--gap);
}
.rodape__marca img { height: 44px; width: auto; }
.rodape__desc { color: var(--texto-sobre-escuro-suave); margin-top: 1.25rem; max-width: 40ch; font-size: 0.92rem; }
.rodape__parceria { margin-top: 1.5rem; }
.rodape__parceria-rotulo { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--texto-sobre-escuro-suave); margin-bottom: 0.35rem; }
.rodape__parceria .rodape__parceria-marcas { display: block; height: 30px; width: auto; }
/* gap 0 + padding-block nos links: mesmo ritmo visual, alvo de toque maior (~35px) */
.rodape__col { display: flex; flex-direction: column; gap: 0; align-items: flex-start; }
.rodape__col a, .rodape__col span { padding-block: 0.35rem; }
.rodape__titulo { font-family: var(--fonte-texto); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--texto-sobre-escuro-suave); margin-bottom: 0.75rem; }
.rodape__col a, .rodape__col span { color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; transition: color var(--transicao-rapida); }
.rodape__col a:hover, .rodape__col a.is-ativo { color: var(--amarelo-400); }
/* Itens do menu Legal sem link (páginas ainda não existem, ver footer.php):
   texto opaco o bastante pra não convidar o clique, sem sinal de link. */
.rodape__col span { opacity: 0.68; cursor: default; }
.rodape__base { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.rodape__base-interno {
    max-width: var(--largura-max); margin-inline: auto; padding: 1.35rem var(--padding-lat);
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 1.5rem;
}
.rodape__base-interno p { font-size: 0.85rem; color: var(--texto-sobre-escuro-suave); }
.rodape__creditos { font-size: 0.85rem; color: var(--texto-sobre-escuro-suave); transition: color var(--transicao-rapida); }
.rodape__creditos:hover { color: var(--amarelo-400); }

/* ============================================================
   CONTATO (/contact) — página institucional. Reaproveita mini-hero,
   .secao/.secao--afundada, .botao, .cta-why/.cta-final e as marcas
   decorativas (.deco). Blocos próprios: formulário inteligente por
   perfil, canais oficiais e mapa.
   ============================================================ */

/* Formulário · seletor de perfil + campos à esquerda, foto e nota à direita */
.contato-form-secao { position: relative; overflow: hidden; }
.contato__bola { --m: url("/imagens/marca/marks/bola.svg"); left: -3%; top: 14%; width: clamp(90px, 12vw, 180px); aspect-ratio: 1; color: var(--cor-primaria); opacity: 0.05; }
.contato {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}
.contato__form { min-width: 0; }
.contato__aside {
    min-width: 0; position: sticky; top: 100px;
    display: flex; flex-direction: column; gap: clamp(1.5rem, 3vw, 2rem);
}
.contato__foto { border-radius: var(--raio-g); overflow: hidden; box-shadow: var(--sombra-p); aspect-ratio: 900 / 1117; }
.contato__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contato__aside-nota { background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g); padding: clamp(1.5rem, 2.5vw, 2rem); }
.contato__aside-titulo { font-size: var(--texto-h3); }
.contato__aside-texto { color: var(--texto-suave); margin-top: 0.75rem; font-size: 0.95rem; }

/* Seletor de perfil · fieldset zerado + 3 cartões clicáveis (o <label> é o
   cartão inteiro; o radio some via clip/1px, nunca display:none, para não
   perder o foco de teclado). Estado marcado e anel de foco entram como
   overlay via combinador irmão, já que o input vem antes dos spans no
   markup — .perfil ganha z-index:0 próprio para o overlay (z-index:-1)
   ficar sempre atrás do texto (que é flex item, pinta acima dele). */
.perfis-campo { border: 0; margin: 0; padding: 0; min-width: 0; }
.perfis-campo legend {
    padding: 0; margin-bottom: 1rem;
    font-size: var(--texto-eyebrow); font-weight: var(--peso-forte);
    letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
    color: var(--cor-primaria);
}
.perfis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-bottom: var(--space-6); }
.perfil {
    position: relative; z-index: 0; display: flex; flex-direction: column; gap: 0.35rem;
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-m);
    padding: var(--space-4); cursor: pointer;
    transition: border-color var(--transicao-rapida), transform var(--dur-rapida) var(--ease), box-shadow var(--transicao-padrao);
}
.perfil:hover { border-color: var(--cor-primaria); transform: translateY(-2px); box-shadow: var(--sombra-p); }
.perfil__radio {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.perfil__titulo { font-weight: var(--peso-forte); color: var(--texto-titulo); font-size: 0.98rem; }
.perfil__desc { color: var(--texto-suave); font-size: 0.85rem; }
/* Cartão marcado: fundo + borda de destaque, atrás do texto (z-index:-1) */
.perfil__radio:checked ~ .perfil__desc::after {
    content: ""; position: absolute; inset: 0; z-index: -1;
    border: 2px solid var(--cor-primaria); border-radius: var(--raio-m);
    background: var(--cor-primaria-tint); pointer-events: none;
}
/* Anel de foco visível: o outline nativo do radio fica invisível (clipado) */
.perfil__radio:focus-visible ~ .perfil__titulo::before {
    content: ""; position: absolute; inset: -2px; z-index: -1;
    border-radius: calc(var(--raio-m) + 2px);
    outline: 2px solid var(--foco); outline-offset: 2px;
    pointer-events: none;
}

/* Campos do formulário · grid de 2 colunas, condicionais por perfil */
.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--gap); margin-bottom: var(--space-6); }
.campo--largo { grid-column: 1 / -1; }
/* Fieldset condicional: zera o UA e garante que [hidden] vença o display:grid da regra base */
.campos--condicional { border: 0; margin: 0; padding: 0; min-width: 0; }
.campos--condicional[hidden] { display: none; }
.campo { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.campo__label { font-size: 0.85rem; font-weight: var(--peso-semi); color: var(--texto-titulo); }
.campo__input, .campo__area {
    width: 100%; font-family: var(--fonte-texto); font-size: var(--texto-corpo-md); color: var(--texto-corpo);
    background: var(--superficie); border: 1.5px solid var(--borda-sutil); border-radius: var(--raio-m);
    padding: 0.75rem var(--space-4);
    transition: border-color var(--transicao-rapida);
}
.campo__area { resize: vertical; min-height: 9rem; line-height: var(--entrelinha-corpo); }
.campo__input:focus-visible, .campo__area:focus-visible { border-color: var(--cor-primaria); }
.campo__input::placeholder, .campo__area::placeholder { color: var(--texto-suave); opacity: 0.75; }

/* LGPD + ações do formulário */
.lgpd { display: flex; align-items: flex-start; gap: 0.65rem; margin-bottom: var(--space-6); cursor: pointer; }
.lgpd__check { flex: none; width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--cor-primaria); }
.lgpd__texto { font-size: 0.88rem; color: var(--texto-suave); }
.lgpd__texto a { color: var(--cor-primaria); font-weight: var(--peso-semi); text-decoration: underline; text-underline-offset: 2px; }
.form { display: flex; flex-direction: column; }
.form__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-2); }
.form__nota { color: var(--texto-suave); font-size: 0.85rem; }

/* Painéis de retorno: erro reaproveita o token do sol (atenção); sucesso, o da folha (positivo) */
.form__erro {
    border: 1px solid var(--amarelo-500); border-left: 4px solid var(--amarelo-500);
    background: var(--cor-sol-tint); border-radius: var(--raio-m);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-6);
}
.form__erro-titulo { font-weight: var(--peso-forte); color: var(--amarelo-700); }
.form__erro-lista { list-style: disc; padding-left: 1.25rem; margin-top: 0.5rem; color: var(--texto-corpo); font-size: 0.92rem; }
.form__ok {
    border: 1px solid var(--cor-folha); border-left: 4px solid var(--cor-folha);
    background: var(--cor-folha-tint); border-radius: var(--raio-g);
    padding: clamp(1.75rem, 3vw, 2.5rem);
}
.form__ok-titulo { font-family: var(--fonte-display); font-size: var(--texto-h3); color: var(--verde-700); }
.form__ok-texto { color: var(--texto-corpo); margin-top: 0.75rem; }
.form__ok .botao { margin-top: var(--space-5); }

/* Honeypot: some da tela sem display:none/visibility:hidden — robô não detecta trivialmente */
.hp { position: absolute; width: 1px; height: 1px; left: -9999px; top: auto; overflow: hidden; }

/* ============================================================
   CANAIS OFICIAIS (/contact) — 3 cartões (e-mail, telefone, redes)
   ============================================================ */
.canais-secao { position: relative; }
.canais { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.canal {
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    padding: clamp(1.5rem, 2.5vw, 2.25rem); text-align: center;
}
.canal__mark { width: clamp(40px, 5vw, 48px); height: auto; margin: 0 auto 1.1rem; }
.canal__titulo { font-size: var(--texto-h3); }
.canal__valor { margin-top: 0.6rem; font-weight: var(--peso-semi); }
.canal__valor a { color: var(--cor-primaria); transition: color var(--transicao-rapida); }
.canal__valor a:hover { color: var(--cor-primaria-hover); text-decoration: underline; text-underline-offset: 3px; }
.canal__desc { color: var(--texto-suave); margin-top: 0.6rem; font-size: 0.92rem; }
.sociais { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; }
.social {
    padding: 0.5rem 1.1rem; border: 1.5px solid var(--borda-sutil); border-radius: var(--raio-pill);
    font-size: 0.85rem; font-weight: var(--peso-semi); color: var(--texto-titulo);
    transition: border-color var(--transicao-rapida), color var(--transicao-rapida);
}
.social:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }

/* ============================================================
   MAPA (/contact) — iframe do Google Maps + cartão de endereço
   ============================================================ */
.mapa-secao { position: relative; }
.mapa { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--gap); align-items: stretch; }
.mapa__quadro {
    min-width: 0; border-radius: var(--raio-g); overflow: hidden;
    box-shadow: var(--sombra-p); height: var(--altura-mapa);
}
.mapa__frame { width: 100%; height: 100%; border: 0; display: block; }
.mapa__cartao {
    min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-5);
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    padding: clamp(1.5rem, 2.5vw, 2rem);
}
.endereco { display: flex; flex-direction: column; }
.endereco__titulo { font-size: var(--texto-h3); }
.endereco__linha { color: var(--texto-suave); margin-top: 0.4rem; }
.mapa__link { align-self: flex-start; }

/* ============================================================
   PRODUTOS (/products) — vitrine do portfólio. Reaproveita
   mini-hero, .kpis (padrões de exportação), .estado-vazio,
   .cta-final e as marcas decorativas. Blocos próprios: filtro
   de categoria, grade de variedades, tabela de destinos e
   painel de janelas de suprimento.
   ============================================================ */
.portfolio-secao { position: relative; overflow: hidden; }
.portfolio__bola { --m: url("/imagens/marca/marks/bola.svg"); right: -4%; top: 8%; width: clamp(90px, 12vw, 180px); aspect-ratio: 1; color: var(--cor-primaria); opacity: 0.05; }

/* Filtro de categoria · links reais (?cat=), estado ativo em campo azul */
.filtro {
    position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center;
    gap: 0.6rem; margin-bottom: var(--espaco-bloco);
}
.filtro__op {
    padding: 0.55rem 1.15rem; border: 1.5px solid var(--borda-sutil); border-radius: var(--raio-pill);
    font-size: 0.9rem; font-weight: var(--peso-semi); color: var(--texto-titulo);
    transition: border-color var(--transicao-rapida), color var(--transicao-rapida), background var(--transicao-rapida);
}
.filtro__op:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.filtro__op.is-ativo { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--texto-sobre-escuro); }
.filtro__contagem { margin-left: auto; color: var(--texto-suave); font-size: var(--texto-peq); }

/* Grupo de categoria dentro da listagem */
.grupo { position: relative; z-index: 1; }
.grupo + .grupo { margin-top: var(--espaco-bloco); }
.grupo__cabecalho { max-width: var(--largura-texto); margin-bottom: var(--gap); }
.grupo__titulo { font-size: var(--texto-h3); color: var(--cor-primaria); }
.grupo__desc { color: var(--texto-suave); margin-top: 0.6rem; }

/* Grade de variedades · auto-fill resolve o empilhamento sem breakpoint */
.produtos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-produto), 100%), 1fr)); gap: var(--gap); }
.produto {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    box-shadow: var(--sombra-p);
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
}
.produto:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); }
.produto__foto { aspect-ratio: var(--foto-produto); overflow: hidden; background: var(--cinza-100); }
.produto__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transicao-padrao); }
/* Produto sem foto (ex.: escopo 'outros', ainda sem imagem) — bloco neutro no lugar da <picture>. */
.produto__foto--vazia { background: var(--cinza-100); }
.produto:hover .produto__foto img { transform: scale(1.04); }
.produto__corpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.15rem, 2vw, 1.5rem); }
/* h4 fica fora da regra global de h1-h3: sem isto o navegador aplica o bold
   default e a Viga (só peso 400) vira negrito sintético. */
.produto__nome { font-size: 1.15rem; font-family: var(--fonte-display); font-weight: 400; line-height: var(--entrelinha-titulo); color: var(--texto-titulo); text-wrap: balance; }
:lang(zh) .produto__nome { font-weight: 700; }  /* mesmo reforço de peso dos demais títulos em CJK */
.produto__nome-br { color: var(--texto-suave); font-size: var(--texto-peq); margin-top: 0.2rem; }
.produto__desc { color: var(--texto-corpo); font-size: 0.95rem; margin-top: 0.8rem; }

/* Especificações · pares rótulo/valor separados por linha fina */
.produto__specs { margin-top: 1.1rem; display: flex; flex-direction: column; }
/* Rótulo com piso e largura natural; o valor (mais longo, e mais longo ainda
   fora do pt) é quem flexiona e quebra, em vez de espremer o rótulo. */
.spec { display: grid; grid-template-columns: minmax(4.5rem, auto) minmax(0, 1fr); gap: 0.75rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--borda-clara); }
.spec__rotulo { color: var(--texto-suave); font-size: 0.8rem; }
.spec__valor { font-weight: var(--peso-semi); font-size: 0.85rem; text-align: right; }
.produto__cta { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; font-size: 0.9rem; }

/* Padrões de exportação (faixa azul) — grid vem de .kpis/.kpi */
.padroes-secao { position: relative; overflow: hidden; }
.padroes__folha { --m: url("/imagens/marca/marks/folha-dir.svg"); left: 2%; top: 50%; translate: 0 -50%; width: clamp(120px, 18vw, 260px); aspect-ratio: 131 / 128; color: var(--branco); opacity: 0.07; }

/* Aplicações e mercados · duas listas de destinos com barra de participação */
.mercados { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.mercado {
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    padding: clamp(1.5rem, 2.5vw, 2.25rem);
}
.mercado__titulo { font-size: var(--texto-h3); color: var(--cor-primaria); }
.destinos { list-style: none; margin-top: 1.35rem; display: flex; flex-direction: column; }
.destino {
    /* O dado tem prioridade sobre a decoração: o país leva a fração maior e a
       barra encolhe primeiro (piso de 40px). Colunas em fr, e não em largura
       natural, para as barras nascerem no mesmo x em todas as linhas — o que
       só fecha sem quebra porque os nomes longos entram abreviados no lang/. */
    display: grid; grid-template-columns: auto minmax(0, 1.4fr) minmax(40px, 1fr) auto;
    gap: 0.85rem; align-items: center; padding: 0.55rem 0; border-top: 1px solid var(--borda-clara);
}
.destino__pos { font-family: var(--fonte-display); font-size: 0.8rem; color: var(--cinza-300); }
.destino__pais { font-size: 0.95rem; }
.destino--lider .destino__pais { font-weight: var(--peso-forte); }
.destino__barra { position: relative; height: 6px; border-radius: var(--raio-pill); background: color-mix(in srgb, var(--cor-primaria) 12%, transparent); }
.destino__barra::after {
    content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share);
    background: var(--cor-primaria); border-radius: var(--raio-pill);
}
.destino--lider .destino__barra::after { background: var(--cor-sol); }
/* Piso de largura: a linha do líder é a única de 3 dígitos ("57,8%"), e sem o
   piso ela sozinha reserva mais espaço e desloca a barra 5px à esquerda. */
.destino__share { min-width: 2.9rem; font-size: 0.85rem; font-weight: var(--peso-semi); font-variant-numeric: tabular-nums; }
.mercado__total { color: var(--texto-suave); font-size: var(--texto-peq); margin-top: 1.25rem; }
.mercados__nota { margin-top: var(--gap); max-width: var(--largura-texto); color: var(--texto-corpo); font-size: var(--texto-corpo-lg); }
.mercados__fonte { margin-top: 0.75rem; color: var(--texto-suave); font-size: var(--texto-peq); }

/* Janelas de suprimento · texto + painel de sazonalidade oficial */
.safra-secao { position: relative; overflow: hidden; }
.safra__bola { --m: url("/imagens/marca/marks/bola.svg"); left: -4%; bottom: 8%; width: clamp(90px, 12vw, 170px); aspect-ratio: 1; color: var(--cor-sol); opacity: 0.10; }
.safra { position: relative; z-index: 1; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.safra__padrao { margin-top: 1.25rem; font-weight: var(--peso-semi); color: var(--cor-primaria); }
.safra__painel { background: var(--cor-primaria-tint); border-radius: var(--raio-g); padding: clamp(1.75rem, 3vw, 2.5rem); }
.safra__dado + .safra__dado { margin-top: 1.35rem; padding-top: 1.35rem; border-top: 1px solid color-mix(in srgb, var(--cor-primaria) 18%, transparent); }
.safra__valor { font-family: var(--fonte-display); font-size: clamp(1.8rem, 3.4vw, 2.6rem); color: var(--cor-primaria); line-height: 1; }
.safra__valor small { font-size: 0.42em; font-weight: 600; }
.safra__label { color: var(--texto-sobre-tint); margin-top: 0.5rem; font-size: 0.95rem; }
.safra__pendente { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--cor-primaria) 18%, transparent); color: var(--texto-sobre-tint); font-size: var(--texto-peq); }

/* ============================================================
   FORNECEDORES (/suppliers e /suppliers/{slug}) — diretório e
   perfil. Reaproveita .filtro/.campo/.tag/.estado-vazio/.cta-final
   de /products e /contact; blocos próprios abaixo.
   ============================================================ */

/* Barra de filtro do diretório: form real (?produto=&uf=&q=), não JS */
.filtro-fornecedores {
    position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: end;
    gap: 1rem; margin-bottom: var(--espaco-bloco);
}
.filtro-fornecedores .campo { flex: 1 1 160px; min-width: 0; }
.filtro-fornecedores .campo--busca { flex: 2 1 240px; }
.filtro-fornecedores__limpar { font-size: 0.9rem; }

/* Tile neutro do logo: paletas das 15 empresas não têm nada em comum entre
   si (verde/vermelho, azul/branco, verde-escuro...); um fundo claro e
   `object-fit: contain` evitam o choque de cor lado a lado sem recortar
   nenhum logo. Mesma classe no card do diretório e no header do perfil. */
.fornecedor__logo {
    display: flex; align-items: center; justify-content: center;
    aspect-ratio: 5 / 2; background: var(--cinza-50); border-bottom: 1px solid var(--borda-clara);
    padding: clamp(1rem, 3vw, 1.75rem);
}
.fornecedor__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Grade de fornecedores · mesmo mecanismo auto-fill de .produtos */
.fornecedores { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-fornecedor), 100%), 1fr)); gap: var(--gap); }
.fornecedor {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    box-shadow: var(--sombra-p);
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
}
.fornecedor:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); }
.fornecedor__corpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.15rem, 2vw, 1.5rem); gap: 0.4rem; }
.fornecedor__nome { font-size: 1.15rem; font-family: var(--fonte-display); font-weight: 400; line-height: var(--entrelinha-titulo); color: var(--texto-titulo); }
:lang(zh) .fornecedor__nome { font-weight: 700; }
.fornecedor__local { color: var(--texto-suave); font-size: var(--texto-peq); }
.fornecedor__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.fornecedor__cta { margin-top: auto; padding-top: 1rem; align-self: flex-start; font-size: 0.9rem; }

/* Perfil de fornecedor (/suppliers/{slug}) */
.perfil-forn__hero .hero-interna__grade { align-items: center; }
/* Bloco à parte do eyebrow: sem isso os dois ficam inline-flex lado a lado
   (herdado de .link-seta) e o texto do link encavala o eyebrow de local. */
.perfil-forn__voltar { display: flex; width: fit-content; margin-bottom: 1rem; font-size: 0.9rem; }
/* .link-seta nasceu para links "avançar" (seta → depois do texto); aqui o
   sentido é o oposto (← já no texto), então some com a seta herdada. */
.perfil-forn__voltar::after { content: none; }
.perfil-forn__badge {
    display: inline-block; margin-top: 0.6rem; font-size: 0.75rem; font-weight: var(--peso-forte);
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-primaria);
}
.perfil-forn__acoes { justify-content: flex-start; margin-top: 1.75rem; }
/* No perfil o logo é o único elemento da coluna (sem outros logos ao lado
   para tingir), então dispensa o tile neutro de .fornecedor__logo — aqui
   ganha espaço em vez de caixa. */
.perfil-forn__logo {
    width: min(420px, 100%); margin-inline: auto;
    background: none; border-bottom: 0; padding: 0; aspect-ratio: auto;
}
.perfil-forn__logo img { max-height: clamp(120px, 14vw, 220px); }

/* Produtos fornecidos: cartão com foto (mesmo recorte de .produto__foto),
   grade auto-fill porque a lista varia de 1 a mais de uma dezena de itens. */
.perfil-forn__produtos {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-produto-forn), 100%), 1fr)); gap: var(--gap);
}
.perfil-forn__produto {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    box-shadow: var(--sombra-p);
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
}
.perfil-forn__produto:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); }
/* Sem correspondência confiável com catalogo_produtos() (ver includes/fornecedores.php)
   o cartão não tem foto — o fundo neutro preenche o espaço reservado, sem quebrar a grade. */
.perfil-forn__produto-foto { aspect-ratio: var(--foto-produto); overflow: hidden; background: var(--cinza-100); }
.perfil-forn__produto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.perfil-forn__produto-corpo {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem;
    padding: 1rem clamp(1.15rem, 2vw, 1.5rem);
}

.perfil-forn__selo { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.perfil-forn__selo img { width: 72px; height: auto; flex-shrink: 0; }
.perfil-forn__selo p { font-weight: var(--peso-semi); color: var(--texto-titulo); }

/* Contatos do fornecedor no banner verde (perfil individual): grade de
   pares rótulo/valor, centralizada, antes do botão principal. */
.perfil-forn__contatos {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem 2.5rem;
    margin: 1.75rem auto 2rem; max-width: 60ch;
}
.perfil-forn__contatos dt {
    font-size: var(--texto-peq); font-weight: var(--peso-forte); text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--texto-sobre-escuro-suave);
}
.perfil-forn__contatos dd { margin-top: 0.3rem; color: var(--branco); font-weight: var(--peso-semi); }
.perfil-forn__contatos dd a { color: var(--branco); text-decoration: underline; text-underline-offset: 3px; }
.perfil-forn__contatos dd a:hover { color: var(--amarelo-400); }

/* Galeria de lavoura/fazenda: fotos ainda não entregues pelo cliente. Cada
   vão reserva o espaço no mesmo recorte de .produto__foto — quando as fotos
   chegarem, troca-se o placeholder por <picture> sem mexer na grade. */
.perfil-forn__galeria {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-galeria-forn), 100%), 1fr)); gap: var(--gap);
    margin-top: 1.75rem;
}
.perfil-forn__galeria-item {
    aspect-ratio: var(--foto-produto); border-radius: var(--raio-g);
    border: 1px dashed var(--borda-sutil); background: var(--cinza-50);
}

/* ============================================================
   AGENDA (/events) — lista única de eventos, sem abas e sem
   página interna por evento. Reaproveita .eventos-grade/.evento/
   .summit (Home, Seção 7) e .estado-vazio/.cta-final/.cta-why
   (contato); nenhum bloco próprio além desses.
   ============================================================ */

/* ============================================================
   MARKET INSIGHTS (/market-insights e /market-insights/{slug}) —
   mosaico editorial com filtro por categoria. Reaproveita
   .filtro (de /products), .hero-interna/.perfil-forn__voltar/
   .evento-perfil__media (perfil de evento), .estado-vazio/.cta-final;
   blocos próprios abaixo.
   ============================================================ */

/* Seção 2 · Destaque do relatório PulseInsights (faixa azul, PDF pendente) */
.relatorio-secao { position: relative; overflow: hidden; }
.relatorio__folha { --m: url("/imagens/marca/marks/folha-dir.svg"); right: 2%; top: 50%; translate: 0 -50%; width: clamp(120px, 18vw, 260px); aspect-ratio: 131 / 128; color: var(--branco); opacity: 0.07; }
.relatorio { position: relative; z-index: 1; display: grid; grid-template-columns: 1.4fr 0.85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.relatorio__fonte { margin-top: 1.25rem; color: var(--texto-sobre-escuro-suave); font-size: var(--texto-peq); }
/* Painel do relatório: enquanto o PDF não chega, é um estado pendente honesto —
   ícone-rótulo e aviso, sem botão de download que baixaria nada. */
.relatorio__painel {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
    background: rgba(255, 255, 255, 0.08); border: 1px dashed var(--borda-escura);
    border-radius: var(--raio-g); padding: clamp(1.75rem, 3vw, 2.5rem);
}
.relatorio__icone {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.35rem 0.7rem; border-radius: var(--raio-p);
    background: var(--cor-sol); color: var(--preto);
    font-family: var(--fonte-display); font-size: 0.9rem; letter-spacing: 0.08em;
}
.relatorio__pendente { color: var(--texto-sobre-escuro-suave); font-size: 0.95rem; }

/* Seção 3 · Grade de artigos · auto-fill resolve o empilhamento sem breakpoint */
.artigos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--card-artigo), 100%), 1fr)); gap: var(--gap); }
.artigo {
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--superficie-cartao); border: 1px solid var(--borda-clara); border-radius: var(--raio-g);
    box-shadow: var(--sombra-p);
    transition: transform var(--transicao-padrao), box-shadow var(--transicao-padrao);
}
.artigo:hover { transform: translateY(-5px); box-shadow: var(--sombra-m); }
.artigo__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--cinza-100); }
.artigo__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transicao-padrao); }
.artigo:hover .artigo__foto img { transform: scale(1.04); }
.artigo__corpo { display: flex; flex-direction: column; flex: 1; padding: clamp(1.15rem, 2vw, 1.5rem); }
.artigo__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.85rem; margin-bottom: 0.7rem; }
.artigo__cat { font-weight: var(--peso-forte); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cor-primaria); }
.artigo__data { color: var(--texto-suave); font-size: 0.78rem; }
/* h3 fica fora da regra global de h1-h3: a Viga só tem peso 400, o bold default
   viraria negrito sintético (mesmo motivo de .produto__nome). */
.artigo__titulo { font-family: var(--fonte-display); font-weight: 400; font-size: 1.2rem; line-height: var(--entrelinha-titulo); color: var(--texto-titulo); }
:lang(zh) .artigo__titulo { font-weight: 700; }
.artigo__titulo a { color: inherit; transition: color var(--transicao-rapida); }
.artigo__titulo a:hover { color: var(--cor-primaria); }
.artigo__resumo { color: var(--texto-corpo); font-size: 0.95rem; margin-top: 0.7rem; }
.artigo__cta { margin-top: auto; padding-top: 1.25rem; align-self: flex-start; font-size: 0.9rem; }
/* Stub sem ficha: rótulo "quieto", não é link — mesma hierarquia do evento
   realizado (que também não linka). */
.artigo__cta--pendente { color: var(--texto-suave); font-weight: var(--peso-semi); }

/* Seção 4 · Newsletter setorial (captura via /contact) */
.newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--gap); }
.newsletter__texto { max-width: var(--largura-texto); }

/* ---- Ficha do artigo (/market-insights/{slug}) ---- */
/* Hero sem imagem: coluna única, título e lead ocupam a largura total. */
.artigo-perfil__hero .hero-interna__grade { grid-template-columns: 1fr; align-items: start; }
.artigo-perfil__hero .hero-interna__lead { max-width: none; }
.artigo-perfil__meta-pendente { margin-top: 1.5rem; color: var(--texto-suave); font-size: var(--texto-peq); }

/* Imagem de abertura do artigo: banner grande, alinhado à largura do texto
   (mesmo --largura-texto do corpo), logo antes dos parágrafos. */
.artigo-perfil__figura {
    display: block; max-width: var(--largura-texto);
    margin: 0 auto clamp(2rem, 5vw, 3.5rem);
    aspect-ratio: 16 / 9; border-radius: var(--raio-g); overflow: hidden;
}
.artigo-perfil__figura img { width: 100%; height: 100%; object-fit: cover; }

/* Corpo longo: coluna estreita para leitura confortável (mesmo --largura-texto
   dos parágrafos do site), centralizada. */
.artigo-corpo { max-width: var(--largura-texto); margin-inline: auto; }
.artigo-corpo__subtitulo { font-size: var(--texto-h3); color: var(--cor-primaria); margin-bottom: 1rem; }

/* Navegação ← anterior / próximo → no fim do corpo, na largura do texto.
   Grid de 2 colunas: quando falta um lado, o outro fica na sua ponta (o
   placeholder <span> vazio segura a coluna). */
.artigo-nav {
    max-width: var(--largura-texto); margin: clamp(3rem, 6vw, 4.5rem) auto 0;
    padding-top: 2rem; border-top: 1px solid var(--borda-clara);
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
}
.artigo-nav__link {
    display: flex; flex-direction: column; gap: 0.4rem;
    padding: 1.1rem 1.25rem; border: 1px solid var(--borda-clara);
    border-radius: var(--raio-m); text-decoration: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.artigo-nav__link:hover { border-color: var(--cor-primaria); background: var(--superficie-creme); }
.artigo-nav__link--proximo { text-align: right; }
.artigo-nav__rotulo { font-size: var(--texto-peq); font-weight: 600; color: var(--cor-primaria); }
.artigo-nav__titulo { color: var(--texto-titulo); font-size: var(--texto-corpo); line-height: 1.3; }
.artigo-corpo__paragrafo { color: var(--texto-corpo); font-size: var(--texto-corpo-lg); line-height: var(--entrelinha-corpo); }
.artigo-corpo__paragrafo + .artigo-corpo__paragrafo { margin-top: 1.25rem; }

/* Pull-quote (Seção 3 do artigo · Destaques e Citações): bloco novo — não havia
   componente de citação no site. Barra de acento à esquerda, display grande. */
.artigo-citacao {
    margin: clamp(2rem, 4vw, 3rem) 0; padding: 0.5rem 0 0.5rem clamp(1.25rem, 3vw, 2rem);
    border-left: 4px solid var(--cor-sol);
}
.artigo-citacao__texto {
    font-family: var(--fonte-display); font-weight: 400;
    font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.3; color: var(--texto-titulo);
    text-wrap: balance;
}
.artigo-citacao__autor { display: block; margin-top: 1rem; font-style: normal; font-size: 0.95rem; font-weight: var(--peso-semi); color: var(--texto-suave); }

/* Relacionados (Seção 4 do artigo): chips de fornecedor + ações. Chip reaproveita
   a pílula do filtro, mas como link navegável para /suppliers/{slug}. */
.artigo-rel__chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: var(--gap); }
.artigo-rel__chip {
    padding: 0.5rem 1.05rem; border: 1.5px solid var(--borda-sutil); border-radius: var(--raio-pill);
    font-size: 0.9rem; font-weight: var(--peso-semi); color: var(--texto-titulo);
    transition: border-color var(--transicao-rapida), color var(--transicao-rapida);
}
.artigo-rel__chip:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }
.artigo-rel__acoes { justify-content: flex-start; }

/* Botão "Restrito" no cabeçalho: eco do .botao--fantasma em tamanho de nav,
   mesmo ícone de cadeado usado no link de eco dentro do menu mobile.
   (display do eco mobile fica com a regra .nav-principal__link--restrito
   lá em cima, perto de .seletor-idioma--menu — aqui só o alinhamento interno.) */
.botao--restrito { padding: 0.5rem 1rem; font-size: 0.85rem; }
.nav-principal__link--restrito { align-items: center; gap: 0.45rem; }

/* ============================================================
   TRANSPARÊNCIA (/transparencia) — só existe em pt-BR (prestação
   de contas dos convênios ApexBrasil/IBRAFE), sem chaves t(). ---- */
.transparencia__objetivo { max-width: var(--largura-texto); }
.transparencia__convenio { max-width: 640px; }
.transparencia__convenio + .transparencia__convenio { margin-top: var(--espaco-bloco); padding-top: var(--espaco-bloco); border-top: 1px solid var(--borda-clara); }
.transparencia__specs { margin: 1.25rem 0 1.5rem; display: flex; flex-direction: column; }
.transparencia__specs .spec { display: flex; justify-content: space-between; gap: var(--space-4); }
.transparencia__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.icone-cadeado { flex-shrink: 0; }

/* ============================================================
   404 (/404) — página de erro genérica, também usada como fallback
   direto (sem redirect) pelas rotas dinâmicas de slug inexistente
   (suppliers-perfil.php, market-insights-perfil.php). Bússola com a
   agulha torta reforça "saiu do mapa"; a lista de sugestões reaproveita
   $menu de header.php — nunca duplicar os 6 itens à mão aqui. */
.erro-404__interno { max-width: 640px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.erro-404__icone { color: var(--cor-primaria); margin-bottom: var(--space-4); }
.erro-404__eyebrow { justify-content: center; }
.erro-404__titulo { margin-top: 1rem; max-width: 18ch; }
.erro-404__texto { margin: 1rem 0 var(--space-6); max-width: 46ch; color: var(--texto-suave); }
.erro-404__acoes { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; }
.erro-404__sugestoes { margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--borda-clara); width: 100%; }
.erro-404__sugestoes-titulo { font-size: 0.95rem; font-weight: var(--peso-semi); color: var(--texto-suave); margin-bottom: var(--space-4); }
.erro-404__lista { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-3); justify-content: center; list-style: none; padding: 0; margin: 0; }
.erro-404__chip {
    padding: 0.5rem 1.05rem; border: 1.5px solid var(--borda-sutil); border-radius: var(--raio-pill);
    font-size: 0.9rem; font-weight: var(--peso-semi); color: var(--texto-titulo);
    transition: border-color var(--transicao-rapida), color var(--transicao-rapida);
}
.erro-404__chip:hover { border-color: var(--cor-primaria); color: var(--cor-primaria); }