/* =====================================================================
   Caltins — design system PÚBLICO (docs/15-design-system-publico-cms-institucional.md)
   Camada própria, separada do painel (admin.css). Sem CDN, sem framework.
   Ordem: fontes → tokens → base → layout → componentes → seções/blocos
   → utilitários → movimento reduzido → impressão.
   ===================================================================== */

/* ---------------------------------------------------------------- Fontes (Open Sans, SIL OFL 1.1, variável 300–800) */
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/open-sans/open-sans-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------------------------------------------------------------- Tokens */
:root {
    /* Marca (manual Caltins, docs/00 §2.1) */
    --soja: #BCBC42;
    --capim: #567639;
    --floresta: #2C4D2C;
    --preto: #000000;

    /* Neutros e derivados (sem novas cores de marca) */
    --floresta-profunda: #213A21;   /* hover sobre Floresta */
    --soja-hover: #A9A93A;          /* hover do botão Soja (texto preto 8:1) */
    --branco: #FFFFFF;
    --fundo: #FFFFFF;
    --fundo-suave: #F5F6F0;         /* superfícies claras alternadas */
    --texto: #161A16;
    --texto-suave: #4B5448;         /* 7,8:1 sobre branco */
    --borda: #DDE2D6;
    --borda-forte: #B9C2B0;
    --sobre-escuro: #FFFFFF;
    --sobre-escuro-suave: #D6DED0;  /* 8,1:1 sobre Floresta */

    /* Tipografia */
    --fonte: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --t-xs: .8125rem;
    --t-sm: .9375rem;
    --t-base: 1.0625rem;
    --t-lg: 1.1875rem;
    --t-xl: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
    --t-2xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    --t-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
    --t-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
    /* Títulos das páginas internas: menores que o hero; títulos longos (notícias, produtos) ainda menores. */
    --t-titulo-pagina: clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
    --t-titulo-longo: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    --peso-normal: 400;
    --peso-medio: 600;
    --peso-forte: 700;
    --peso-titulo: 800;
    --altura-linha: 1.65;
    --altura-linha-titulo: 1.15;

    /* Espaçamento (base 4px) */
    --e-1: .25rem;
    --e-2: .5rem;
    --e-3: .75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;
    --secao: clamp(3rem, 2rem + 4vw, 6rem);

    /* Layout */
    --container: 1320px;
    --texto-largura: 72ch;
    --gutter: clamp(1rem, .5rem + 2.5vw, 2.5rem);
    --altura-topo: 76px;
    --sobreposicao: clamp(2rem, 1rem + 4vw, 5rem); /* imagem de destaque sobre a base do cabeçalho interno */

    /* Forma */
    --raio-1: 4px;
    --raio-2: 8px;
    --raio-3: 16px;
    --raio-cartao: 12px;
    --raio-total: 999px;
    --sombra-1: 0 1px 2px rgba(22, 26, 22, .06), 0 1px 3px rgba(22, 26, 22, .08);
    --sombra-2: 0 8px 24px rgba(22, 26, 22, .10);

    /* Estados */
    --foco: var(--floresta);        /* 9,5:1 sobre branco; em seções escuras vira Soja */
    --foco-largura: 3px;

    /* Camadas */
    --z-topo: 50;
    --z-menu: 60;
    --z-pular: 100;

    /* Movimento */
    --duracao: 180ms;
    --curva: cubic-bezier(.2, .6, .2, 1);
    /* Entradas: lentas e suaves (sem "salto" no fim). */
    --curva-saida: cubic-bezier(.22, 1, .36, 1);
    --revelar-duracao: 850ms;
    --revelar-passo: 110ms;
    --revelar-distancia: 10px;

    /* Breakpoints (referência; media queries não aceitam variáveis):
       480 · 720 · 1024 · 1440 px */
}

/* ---------------------------------------------------------------- Base */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--altura-topo) + var(--e-4)); }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--t-base);
    line-height: var(--altura-linha);
    color: var(--texto);
    background: var(--fundo);
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0 0 var(--e-4); font-weight: var(--peso-titulo); line-height: var(--altura-linha-titulo); color: var(--floresta); letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: var(--t-4xl); line-height: 1.08; letter-spacing: -.02em; }
h2 { font-size: var(--t-3xl); }
h3 { font-size: var(--t-xl); font-weight: var(--peso-forte); }
h4 { font-size: var(--t-lg); font-weight: var(--peso-forte); }
p { margin: 0 0 var(--e-4); }
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--capim); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--floresta); text-decoration-thickness: 2px; }
ul, ol { margin: 0 0 var(--e-4); padding-left: 1.25em; }

:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 3px; border-radius: var(--raio-1); }
.escuro { --foco: var(--soja); color: var(--sobre-escuro); }
.escuro h1, .escuro h2, .escuro h3, .escuro h4 { color: var(--sobre-escuro); }
.escuro a:not(.botao) { color: var(--sobre-escuro); }

.pular-conteudo {
    position: absolute; left: var(--e-4); top: -100px; z-index: var(--z-pular);
    padding: var(--e-3) var(--e-4); background: var(--floresta); color: var(--branco); font-weight: var(--peso-forte);
    border-radius: var(--raio-2); text-decoration: none;
}
.pular-conteudo:focus { top: var(--e-3); color: var(--branco); --foco: var(--soja); }

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

main:focus { outline: none; }

/* ---------------------------------------------------------------- Layout */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.container--texto { max-width: calc(var(--texto-largura) + 2 * var(--gutter)); }

/* Superfícies explícitas. Na Home, a view alterna clara/suave entre as
   seções escuras (site/home.php); duas superfícies iguais vizinhas (seção
   desligada no CMS) ganham um filete para não se fundirem. */
.secao { padding-block: var(--secao); }
.secao--clara { background: var(--fundo); }
.secao--suave { background: var(--fundo-suave); }
.secao--escura { background: var(--floresta); }
.secao--clara + .secao--clara, .secao--suave + .secao--suave { border-top: 1px solid var(--borda); }
/* Páginas internas: seções claras consecutivas formam um só fluxo de leitura.
   Depois de uma faixa suave/escura, a seção clara mantém o respiro superior
   (antes a regra também zerava esse caso e vencia as exceções por página). */
.pagina > .secao:not(.secao--suave):not(.secao--escura) + .secao:not(.secao--suave):not(.secao--escura) { padding-top: 0; }

.grade { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
    .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grade--meio { align-items: center; }
}

/* ---------------------------------------------------------------- Botões */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
    min-height: 48px; padding: var(--e-3) var(--e-5);
    font: inherit; font-size: var(--t-sm); font-weight: var(--peso-forte); line-height: 1.2; text-decoration: none; text-align: center;
    border: 2px solid transparent; border-radius: var(--raio-2); cursor: pointer;
    transition: background-color var(--duracao) var(--curva), color var(--duracao) var(--curva), border-color var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva), transform 120ms var(--curva);
}
/* Clique: o botão "afunda" 1px (desligado em movimento reduzido). */
.botao:active { transform: translateY(1px); }
.botao .icone { width: 18px; height: 18px; flex-shrink: 0; }
/* Microinteração: a seta avança levemente (desligada em movimento reduzido). */
.botao .icone-site { transition: transform var(--duracao) var(--curva); }
.botao:hover .icone-site { transform: translateX(3px); }
/* Soja SEMPRE com texto Preto (10,4:1). Nunca branco. */
.botao--primario { background: var(--soja); color: var(--preto); }
.botao--primario:hover { background: var(--soja-hover); color: var(--preto); text-decoration: none; box-shadow: 0 6px 18px -8px rgba(33, 58, 33, .45); }
.botao--secundario { background: transparent; color: var(--floresta); border-color: var(--floresta); }
.botao--secundario:hover { background: var(--floresta); color: var(--branco); text-decoration: none; }
.escuro .botao--secundario { color: var(--branco); border-color: var(--branco); }
.escuro .botao--secundario:hover { background: var(--branco); color: var(--floresta); }
.grupo-botoes { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }
/* Celular: botões empilhados com a mesma largura (sem "escada" de tamanhos). */
@media (max-width: 479px) {
    .grupo-botoes:not(.grupo-botoes--centro) { flex-direction: column; align-items: stretch; }
}

/* ---------------------------------------------------------------- Rótulo de seção (eyebrow) */
.sobretitulo {
    display: inline-block; margin: 0 0 var(--e-3);
    font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; color: var(--capim);
}
.sobretitulo::before { content: ""; display: inline-block; width: 1.5em; height: 2px; margin-right: .6em; vertical-align: middle; background: currentColor; }
.escuro .sobretitulo { color: var(--soja); }

/* ---------------------------------------------------------------- Cabeçalho */
/* Escuro como no mockup: logo NEGATIVO oficial; a marca do Grupo J. Demito
   (Aparência → logo do grupo) vem à direita, sem moldura: altura fixa e
   largura proporcional (object-fit: contain, sem distorção). Fundo embutido
   no arquivo não é escondido por CSS — pede-se versão transparente. */
.topo {
    position: sticky; top: 0; z-index: var(--z-topo);
    background: var(--floresta-profunda); border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topo__barra { position: relative; display: flex; align-items: center; gap: var(--e-4); min-height: var(--altura-topo); padding-block: var(--e-2); }
.topo__marca { display: flex; align-items: center; gap: var(--e-3); flex-shrink: 0; text-decoration: none; }
.topo__marca img { width: 150px; height: auto; }
.topo__endosso, .selo-grupo { display: inline-flex; align-items: center; flex-shrink: 0; }
.topo__endosso img { width: auto; height: 32px; max-width: 96px; object-fit: contain; }
.topo__espaco { flex: 1; }
.topo__ufs {
    display: none; margin: 0; padding: var(--e-1) var(--e-3);
    font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .06em; color: var(--sobre-escuro);
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--raio-total); white-space: nowrap;
}
.topo__cta { display: none; }
/* Botão de destaque na própria página de destino: mesma marca de "atual" do menu (sublinhado grosso). */
.topo__cta .botao[aria-current="page"], .menu-movel__cta .botao[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--floresta-profunda); }

/* Navegação principal (desktop) */
.menu-principal { display: none; }
/* Espaço visual entre itens compacto (padding lateral 8 px); a área clicável
   segue com 44 px de altura e a largura do rótulo + respiro. */
.menu-principal__lista { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.menu-principal__lista > li { position: relative; }
.menu-principal a, .menu-principal summary {
    display: flex; align-items: center; gap: var(--e-1); min-height: 44px; padding: var(--e-2);
    font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--sobre-escuro); text-decoration: none; border-radius: var(--raio-2); cursor: pointer; white-space: nowrap;
}
.menu-principal a:hover, .menu-principal summary:hover { color: var(--soja); background: rgba(255, 255, 255, .06); }
.menu-principal a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--soja); }
.menu-principal summary { list-style: none; }
.menu-principal summary::-webkit-details-marker { display: none; }
.menu-principal summary::after { content: ""; width: .45em; height: .45em; margin-left: .3em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.menu-principal details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.submenu {
    position: absolute; top: calc(100% + 6px); left: 0; min-width: 240px; margin: 0; padding: var(--e-2); list-style: none;
    background: var(--floresta); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--raio-2); box-shadow: var(--sombra-2);
}
.submenu a { width: 100%; padding-inline: var(--e-3); }

@media (min-width: 1024px) {
    .menu-principal { display: block; }
    .menu-movel { display: none; }
    .topo__cta { display: inline-flex; }
    /* Rótulo numa linha só ("Onde estamos"): sem quebra, a altura do cabeçalho não varia entre larguras. */
    .topo__cta .botao { min-height: 44px; padding-block: var(--e-2); white-space: nowrap; }
}
@media (min-width: 1024px) and (max-width: 1199px) {
    .topo__marca img { width: 128px; }
    /* Seis itens + botão de destaque: espaçamentos menores para caber no container sem invadir a margem. */
    .topo__barra { gap: var(--e-3); }
    .menu-principal a, .menu-principal summary { padding-inline: 5px; }
    /* Fase 9: mais itens no menu (ex.: Representantes) — botão compacto nesta faixa. */
    .topo__cta .botao { padding-inline: var(--e-3); }
    .topo__cta .botao .icone-site { display: none; }
}
@media (min-width: 1360px) {
    .topo__ufs { display: block; }
}

/* Navegação móvel: <details> funciona sem JavaScript */
.menu-movel > summary {
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: var(--e-2) var(--e-4);
    font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--sobre-escuro);
    border: 2px solid rgba(255, 255, 255, .7); border-radius: var(--raio-2); cursor: pointer; list-style: none;
}
.menu-movel > summary::-webkit-details-marker { display: none; }
.menu-movel__icone { width: 20px; height: 14px; position: relative; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.menu-movel__icone::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; }
.menu-movel[open] .menu-movel__icone { border-color: transparent; }
.menu-movel[open] .menu-movel__icone::before, .menu-movel[open] .menu-movel__icone::after {
    content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor;
}
.menu-movel[open] .menu-movel__icone::before { transform: rotate(45deg); }
.menu-movel[open] .menu-movel__icone::after { transform: rotate(-45deg); }
.menu-movel__painel {
    position: absolute; left: 0; right: 0; top: 100%; z-index: var(--z-menu);
    max-height: calc(100vh - var(--altura-topo)); max-height: calc(100dvh - var(--altura-topo)); overflow-y: auto;
    padding: var(--e-4) var(--gutter) var(--e-6); background: var(--floresta-profunda); border-top: 1px solid rgba(255, 255, 255, .1); box-shadow: var(--sombra-2);
}
.menu-movel__lista, .menu-movel__lista ul { margin: 0; padding: 0; list-style: none; }
.menu-movel__lista a, .menu-movel__lista summary {
    display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: var(--e-2) 0;
    font-weight: var(--peso-medio); color: var(--sobre-escuro); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .14); cursor: pointer; list-style: none;
}
.menu-movel__lista summary::-webkit-details-marker { display: none; }
/* Item com subitens: seta indica que expande (gira quando aberto). */
.menu-movel__lista summary::after {
    content: ""; flex-shrink: 0; width: .55em; height: .55em; margin: 0 .35em;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform var(--duracao) var(--curva);
}
.menu-movel__lista details[open] > summary { color: var(--soja); }
.menu-movel__lista details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menu-movel__lista ul { margin-left: var(--e-2); border-left: 2px solid rgba(255, 255, 255, .16); }
.menu-movel__lista ul a { padding-left: var(--e-4); font-weight: var(--peso-normal); }
.menu-movel__ufs { margin: var(--e-5) 0 0; font-size: var(--t-sm); color: var(--sobre-escuro-suave); }
.menu-movel__cta { margin-top: var(--e-5); width: 100%; }
.menu-movel__cta .botao { width: 100%; }

@media (max-width: 479px) {
    .topo__marca img { width: 120px; }
    .topo__endosso img { height: 26px; max-width: 72px; }
}

/* ---------------------------------------------------------------- Trilha (breadcrumbs) e título de página */
.trilha ol { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-2); margin: 0 0 var(--e-4); padding: 0; list-style: none; font-size: var(--t-sm); color: var(--texto-suave); }
.trilha li:not(:last-child)::after { content: "/"; margin-left: var(--e-2); color: var(--borda-forte); }
.trilha a { display: inline-flex; align-items: center; min-height: 24px; color: var(--texto-suave); }
.trilha [aria-current="page"] { color: var(--texto); }
/* Celular: a página atual (repetida logo abaixo no h1) fica numa linha só,
   com reticências; o texto completo continua no HTML e para leitores de tela. */
@media (max-width: 719px) {
    .trilha li:last-child { min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
}

/* Lote C: brilho Soja discreto no canto (decorativo, longe do texto) e
   respiro menor no celular. */
.cabecalho-pagina {
    padding-block: var(--e-5) var(--e-6); border-bottom: 1px solid var(--borda);
    background: var(--fundo-suave) radial-gradient(circle at 100% 0, rgba(188, 188, 66, .16), transparent 40%);
}
@media (min-width: 720px) { .cabecalho-pagina { padding-block: var(--e-6) var(--e-7); } }
.cabecalho-pagina h1 { max-width: 24ch; margin-bottom: var(--e-4); font-size: var(--t-titulo-pagina); overflow-wrap: break-word; }
/* Filete Soja sob o título: elemento decorativo da marca, sem texto. */
.cabecalho-pagina h1::after { content: ""; display: block; width: 56px; height: 4px; margin-top: var(--e-4); background: var(--soja); border-radius: 2px; }
.cabecalho-pagina--longo h1 { max-width: 32ch; font-size: var(--t-titulo-longo); line-height: 1.15; }
.cabecalho-pagina__resumo { max-width: 60ch; margin: 0; font-size: var(--t-lg); color: var(--texto-suave); text-wrap: pretty; }
/* Imagem de destaque do CMS (página, processo, sustentabilidade): dentro do
   container, avançando sobre a base do cabeçalho em vez de sangrar a tela
   inteira. Proporção fixa reserva a altura (CLS 0); sem imagem, nada muda. */
.cabecalho-pagina--com-imagem { padding-bottom: calc(var(--e-7) + var(--sobreposicao)); }
.imagem-destaque { position: relative; margin: 0 auto; }
.cabecalho-pagina--com-imagem + .imagem-destaque { margin-top: calc(-1 * var(--sobreposicao)); }
.imagem-destaque img { width: 100%; aspect-ratio: 16 / 9; max-height: 520px; object-fit: cover; background: var(--fundo-suave); border-radius: var(--raio-3); box-shadow: var(--sombra-2); }
@media (min-width: 1024px) { .imagem-destaque img { aspect-ratio: 21 / 9; } }
/* A primeira seção depois do cabeçalho (ou da imagem) não soma o respiro
   inteiro de seção ao do cabeçalho. */
.cabecalho-pagina + .secao, .imagem-destaque + .secao { padding-top: clamp(2rem, 1.25rem + 2.5vw, 3.5rem); }

/* ---------------------------------------------------------------- Hero da Home */
.hero {
    position: relative; display: grid; align-items: center; min-height: clamp(520px, 80vh, 780px);
    padding-block: var(--e-8) calc(var(--e-8) + 3rem); color: var(--sobre-escuro); background: var(--floresta); overflow: hidden;
}
.hero__imagem { position: absolute; inset: 0; margin: 0; }
.hero__imagem img { width: 100%; height: 100%; object-fit: cover; }
/* Película para legibilidade: mais densa do lado do texto. */
.hero__imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33, 58, 33, .94) 0%, rgba(33, 58, 33, .78) 42%, rgba(33, 58, 33, .38) 100%); }
.hero--overlay-suave .hero__imagem::after { background: linear-gradient(90deg, rgba(33, 58, 33, .9) 0%, rgba(33, 58, 33, .62) 42%, rgba(33, 58, 33, .2) 100%); }
.hero--overlay-forte .hero__imagem::after { background: rgba(33, 58, 33, .86); }
.hero--centro .hero__imagem::after { background: rgba(33, 58, 33, .74); }
.hero__conteudo { position: relative; max-width: 46rem; }
.hero--esquerda .hero__conteudo { padding-left: var(--e-5); border-left: 4px solid var(--soja); }
.hero--centro .hero__conteudo { margin-inline: auto; text-align: center; }
.hero--centro .grupo-botoes { justify-content: center; }
.hero h1 { max-width: 18ch; color: var(--sobre-escuro); margin-bottom: var(--e-5); font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.5rem); line-height: 1.04; }
.hero--centro h1 { margin-inline: auto; }
.hero__texto { max-width: 36rem; font-size: var(--t-lg); color: var(--sobre-escuro); text-wrap: pretty; }
/* Base do hero: escurece levemente a transição para a faixa de destaques
   (só a película; a imagem LCP não é animada nem alterada). */
.hero__imagem::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(0deg, rgba(33, 58, 33, .55), transparent); }
.hero--centro .hero__texto { margin-inline: auto; }
/* Fundo em vídeo (enviado ou YouTube): entre a imagem (capa, sempre embaixo)
   e a película, que continua por cima. Invisível até tocar de fato (site.js
   põe .hero--video-ativo): sem tela preta, sem salto, sem piscar. */
.hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--curva-saida); pointer-events: none; }
.hero--video-ativo .hero__video { opacity: 1; }
/* YouTube em "cover": o player 16:9 cobre a área toda (sobra recortada); a
   ampliação leve tira parte da moldura do YouTube das bordas. */
.hero__video--youtube { overflow: hidden; container-type: size; }
.hero__video--youtube iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 0; transform: translate(-50%, -50%) scale(1.15); }
@supports (width: 1cqh) { .hero__video--youtube iframe { width: max(100%, 177.78cqh); height: max(100%, 56.25cqw); } }
/* Único controle do vídeo (pausar/retomar, ou ativar o YouTube), alinhado à
   borda do conteúdo e acima da faixa de destaques que sobrepõe o hero. */
.hero__controle {
    position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--container)) / 2)); bottom: var(--e-5);
    display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.5rem; padding: var(--e-2) var(--e-4);
    font: inherit; font-size: var(--t-xs); font-weight: 600; line-height: 1.2; color: var(--sobre-escuro);
    background: rgba(21, 38, 21, .6); border: 1px solid rgba(255, 255, 255, .4); border-radius: var(--raio-total); cursor: pointer; transition: background-color .2s;
}
.hero__controle[hidden] { display: none; }
.hero__controle:hover { background: rgba(21, 38, 21, .85); }
.hero:has(+ .destaques) .hero__controle { bottom: calc(3.5rem + var(--e-4)); }
.hero__controle-icone { flex: none; width: 1rem; height: 1rem; fill: currentColor; }
.hero__controle[data-estado="tocando"] .hero__controle-tocar, .hero__controle:not([data-estado="tocando"]) .hero__controle-pausar { display: none; }
@media (max-width: 719px) {
    .hero { min-height: 0; padding-block: var(--e-8) calc(var(--e-8) + 2rem); }
    .hero__imagem::after, .hero--overlay-suave .hero__imagem::after { background: rgba(33, 58, 33, .78); }
    .hero--esquerda .hero__conteudo { padding-left: var(--e-4); }
    /* No celular o texto desce até a base: o controle vai para o alto, no respiro superior. */
    .hero__controle, .hero:has(+ .destaques) .hero__controle { top: var(--e-3); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) { .hero__video { transition: none; } }

/* ---------------------------------------------------------------- Seções da Home */
.cabecalho-secao { max-width: 46rem; margin-bottom: var(--e-7); }
.cabecalho-secao h2 { margin-bottom: 0; }
.cabecalho-secao--centro { margin-inline: auto; text-align: center; }
.cabecalho-secao--duplo { max-width: none; display: grid; gap: var(--e-4) var(--e-7); }
.cabecalho-secao__lateral p { margin: 0; max-width: 40rem; color: var(--texto-suave); }
.cabecalho-secao__lateral .botao { margin-top: var(--e-4); }
.escuro .cabecalho-secao__lateral p { color: var(--sobre-escuro-suave); }
@media (min-width: 1024px) {
    .cabecalho-secao--duplo { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; }
    .cabecalho-secao--duplo .cabecalho-secao__lateral { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-4); }
    .cabecalho-secao--duplo .cabecalho-secao__lateral p { flex: 1 1 20rem; }
    .cabecalho-secao__lateral .botao { margin-top: 0; }
    /* Só o botão (sem texto lateral): alinhado à direita, não no meio da linha. */
    .cabecalho-secao__lateral > .botao:only-child { margin-left: auto; }
}

.icone-site { width: 1.5rem; height: 1.5rem; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.botao .icone-site { width: 18px; height: 18px; }

/* Faixa de diferenciais (sobre a base do hero) */
.destaques { position: relative; z-index: 2; padding-top: var(--secao); }
.hero + .destaques { margin-top: -3.5rem; padding-top: 0; }
.destaques__lista {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); margin: 0; padding: var(--e-3) var(--e-5); list-style: none;
    background: var(--floresta); border-radius: var(--raio-3); box-shadow: 0 18px 40px rgba(22, 26, 22, .22);
}
.destaques__lista li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-4) var(--e-3); }
.destaques__lista li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
@media (min-width: 720px) {
    .destaques__lista li + li { border-top: 0; border-left: 1px solid rgba(255, 255, 255, .14); }
}
.destaques__icone { width: 2.25rem; height: 2.25rem; color: var(--soja); stroke-width: 1.6; }
.destaques__texto { display: flex; flex-direction: column; line-height: 1.3; }
.destaques__texto strong { color: var(--sobre-escuro); font-size: var(--t-base); font-weight: var(--peso-titulo); }
.destaques__texto span { color: var(--sobre-escuro-suave); font-size: var(--t-sm); }
/* Celular: duas colunas (antes, 5 itens empilhados ocupavam ~400 px);
   o último item ímpar ocupa a linha inteira. */
@media (max-width: 719px) {
    .destaques__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--e-2); }
    .destaques__lista li { flex-direction: column; align-items: flex-start; gap: var(--e-2); padding: var(--e-4) var(--e-3); }
    .destaques__lista li + li { border-top: 0; }
    .destaques__lista li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .14); }
    .destaques__lista li:nth-child(even) { border-left: 1px solid rgba(255, 255, 255, .14); }
    .destaques__lista li:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .destaques__icone { width: 2rem; height: 2rem; }
    .destaques__texto strong { font-size: var(--t-sm); }
    .destaques__texto span { font-size: var(--t-xs); }
}

/* A Caltins / história */
.historia__grade { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); }
.historia__resumo { font-size: var(--t-lg); color: var(--texto-suave); }
.historia__imagem img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sombra-2); }
@media (min-width: 720px) and (max-width: 1023px) {
    .historia__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .historia__imagem { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .historia__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: var(--e-7); align-items: center; }
    .historia__grade--sem-imagem { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* Presença / onde estamos */
.presenca { background: var(--floresta) radial-gradient(circle at 85% 20%, rgba(86, 118, 57, .55), transparent 55%); }
.presenca__grade { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); }
.presenca__resumo { font-size: var(--t-lg); color: var(--sobre-escuro-suave); }
.presenca__mapa { margin: 0; }
.presenca__mapa-arte {
    position: relative; aspect-ratio: 16 / 11; overflow: hidden; border-radius: var(--raio-3);
    background-color: rgba(255, 255, 255, .04);
    background-image: linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 36px 36px; border: 1px solid rgba(255, 255, 255, .14);
}
.presenca__mapa-arte::before { content: ""; position: absolute; inset: 14% 18% 16% 22%; border-radius: 42% 58% 51% 49% / 46% 38% 62% 54%; background: rgba(86, 118, 57, .55); border: 1px solid rgba(188, 188, 66, .35); }
.presenca__mapa-arte span { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--soja); box-shadow: 0 0 0 6px rgba(188, 188, 66, .22); }
.presenca__mapa-arte span:nth-child(1) { top: 30%; left: 42%; }
.presenca__mapa-arte span:nth-child(2) { top: 44%; left: 58%; }
.presenca__mapa-arte span:nth-child(3) { top: 60%; left: 38%; }
.presenca__mapa-arte span:nth-child(4) { top: 66%; left: 64%; }
.presenca__mapa-arte span:nth-child(5) { top: 38%; left: 70%; }
.presenca__mapa figcaption { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--sobre-escuro-suave); }
/* Duas colunas a partir de 720 px: texto, estados e CTA à esquerda; mapa à
   direita, centrados na vertical. A lista de unidades ficou só em
   /onde-estamos (a Home não a repete). O SVG é retrato (640 × 704): a largura
   limitada do mapa define a altura da seção, sem recorte e sem vazio sob o
   texto. Respiro vertical menor que o das demais seções. */
.presenca { padding-block: clamp(2.5rem, 1.75rem + 3vw, 4.5rem); }
.presenca__texto > :last-child { margin-bottom: 0; }
.presenca__texto .grupo-botoes { margin-top: var(--e-5); }
.presenca__mapa { justify-self: center; width: 100%; max-width: 420px; }
@media (min-width: 720px) {
    .presenca__grade { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e-6); align-items: center; }
    .presenca__mapa { justify-self: end; max-width: 400px; }
}
@media (min-width: 1024px) {
    .presenca__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); }
    .presenca__texto { max-width: 38rem; }
    .presenca__mapa { justify-self: center; max-width: 470px; }
}
/* Imagem de fundo opcional (painel → Onde estamos). Camada decorativa entre o
   fundo verde da seção e o conteúdo (isolation + z-index -1): a foto entra em
   multiply sobre o verde (só escurece, nunca clareia) e a película verde
   profundo vem por cima. Nada de opacity no contêiner: textos, mapa e botões
   ficam intactos. Os níveis espelham SecoesHome::PRESENCA_FUNDO_* (e a prévia
   em admin.css). Imagem que não carrega: o navegador só desenha o ::before de
   <img> quebrada; branco em multiply não altera o verde e cobre o ícone de
   imagem quebrada — fica o fundo sólido. */
.presenca--com-fundo { position: relative; isolation: isolate; overflow: hidden; }
/* O multiply fica na CAMADA (não na <img>): com z-index ela forma um contexto
   de empilhamento próprio, e a <img> lá dentro só se misturaria com o vazio. */
.presenca__fundo { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: multiply; }
.presenca__fundo img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: var(--presenca-imagem, .32); color: transparent; }
.presenca__fundo img::before { content: ""; position: absolute; inset: 0; background: #fff; }
.presenca__fundo::after { content: ""; position: absolute; inset: 0; background: rgba(33, 58, 33, var(--presenca-pelicula, .2)); }
.presenca--imagem-sutil { --presenca-imagem: .2; }
.presenca--imagem-discreta { --presenca-imagem: .32; }
.presenca--imagem-media { --presenca-imagem: .45; }
.presenca--imagem-marcada { --presenca-imagem: .6; }
.presenca--pelicula-nenhuma { --presenca-pelicula: 0; }
.presenca--pelicula-leve { --presenca-pelicula: .2; }
.presenca--pelicula-media { --presenca-pelicula: .35; }
.presenca--pelicula-forte { --presenca-pelicula: .5; }
/* O mapa vira um painel verde quase sólido: a textura da foto não passa por
   ele e limites, áreas atendidas e pinos seguem legíveis. */
.presenca--com-fundo .mapa-estatico,
.presenca--com-fundo .presenca__mapa-arte { background-color: rgba(33, 58, 33, .82); }

/* Grade de cartões (produtos, notícias) */
.grade-cartoes { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
@media (min-width: 1280px) { .grade-cartoes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Sem buracos na última linha: 2, 3 ou 6 cartões preenchem a largura
   (contagem por :has(); sem suporte, fica a grade padrão). A grade de
   notícias com destaque (2 colunas) mantém a regra própria. */
@media (min-width: 1024px) {
    .grade-cartoes:not(:has(.cartao--noticia-destaque)):has(> li:last-child:nth-child(3)),
    .grade-cartoes:not(:has(.cartao--noticia-destaque)):has(> li:last-child:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grade-cartoes:not(:has(.cartao--noticia-destaque)):has(> li:last-child:nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Vitrine da Home (produtos e notícias), só no celular: lista compacta,
   miniatura à esquerda; todos os itens visíveis, sem rolagem lateral nem
   parada extra de teclado (opção A aprovada; a faixa horizontal foi
   descartada). Acima de 720 px vale a grade de cartões. */
@media (max-width: 719px) {
    .vitrine--lista .grade-cartoes { gap: var(--e-3); }
    .vitrine--lista .cartao { display: grid; grid-template-columns: 104px minmax(0, 1fr); }
    .vitrine--lista .cartao__imagem, .vitrine--lista .cartao--noticia .cartao__imagem { aspect-ratio: auto; height: 100%; min-height: 104px; border-bottom: 0; border-right: 3px solid var(--soja); }
    .vitrine--lista .cartao__imagem--vazia { border-right-color: var(--capim); }
    .vitrine--lista .cartao__corpo { justify-content: center; gap: var(--e-1); padding: var(--e-3) var(--e-4); }
    .vitrine--lista .cartao__corpo h3, .vitrine--lista .cartao--produto .cartao__titulo { font-size: var(--t-base); }
    .vitrine--lista .cartao__corpo .cartao__meta { margin-top: 0; padding-top: 0; }
}

/* Processo: abaixo de 1024 px, linha do tempo vertical (número à esquerda,
   conector até a próxima etapa); no desktop, etapas lado a lado com
   conector horizontal de círculo a círculo. */
.etapas { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.etapas li { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: var(--e-4); align-content: start; }
.etapas li > :not(.etapas__numero) { grid-column: 2; }
.etapas__numero {
    grid-row: 1 / span 2; display: grid; place-items: center; width: 52px; height: 52px;
    font-size: var(--t-lg); font-weight: var(--peso-titulo); color: var(--soja); background: var(--floresta); border-radius: 50%;
}
.etapas h3 { margin: var(--e-3) 0 var(--e-2); }
.etapas p { margin: 0; color: var(--texto-suave); }
.etapas li:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 60px; bottom: calc(-1 * var(--e-6) + 8px); width: 2px; background: linear-gradient(180deg, var(--capim), var(--borda-forte)); }
@media (min-width: 1024px) {
    .etapas { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
    .etapas li { display: block; }
    .etapas__numero { margin-bottom: var(--e-4); }
    .etapas h3 { margin-top: 0; }
    .etapas li:not(:last-child)::after { top: 25px; bottom: auto; left: 64px; right: calc(-1 * var(--e-6) + 12px); width: auto; height: 2px; background: linear-gradient(90deg, var(--capim), var(--borda-forte)); }
}

/* Sustentabilidade */
.sustentabilidade { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--fundo-suave); }
.sustentabilidade.secao--clara { background: var(--fundo); }
.sustentabilidade__imagem { margin: 0; min-height: 280px; overflow: hidden; }
.sustentabilidade__imagem img { width: 100%; height: 100%; min-height: 280px; max-height: 420px; object-fit: cover; }
.sustentabilidade__conteudo { display: grid; gap: var(--e-6); padding: var(--secao) var(--gutter); }
.pilares { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-content: center; margin: 0; padding: 0; list-style: none; }
.pilares li { display: flex; gap: var(--e-3); align-items: flex-start; }
.pilares .icone-site { width: 2.25rem; height: 2.25rem; color: var(--capim); }
.pilares strong { display: block; color: var(--floresta); line-height: 1.3; }
.pilares span span { display: block; font-size: var(--t-sm); color: var(--texto-suave); }
@media (min-width: 1024px) {
    /* A imagem sangra à esquerda sem definir a altura da faixa; o conteúdo alinha com o container à direita. */
    .sustentabilidade { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); }
    .sustentabilidade--sem-imagem { grid-template-columns: minmax(0, 1fr); }
    .sustentabilidade__imagem { position: relative; min-height: 440px; }
    .sustentabilidade__imagem img { position: absolute; inset: 0; min-height: 0; max-height: none; }
    .sustentabilidade__conteudo { padding-left: var(--e-7); padding-right: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
}
@media (min-width: 1280px) {
    .sustentabilidade { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
    .sustentabilidade__conteudo { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--e-7); align-items: center; }
    .pilares { grid-template-columns: minmax(0, 1fr); }
}

/* Depoimentos */
.depoimentos { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.depoimento { display: flex; flex-direction: column; height: 100%; margin: 0; padding: var(--e-6); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-1); }
.depoimento__aspas { width: 2rem; height: 2rem; color: var(--capim); margin-bottom: var(--e-3); }
.depoimento blockquote { flex: 1; margin: 0 0 var(--e-5); }
.depoimento blockquote p { margin: 0; font-size: var(--t-base); color: var(--texto); }
.depoimento figcaption { display: flex; align-items: center; gap: var(--e-3); line-height: 1.3; }
.depoimento__avatar { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; font-size: var(--t-sm); font-weight: var(--peso-titulo); color: var(--branco); background: var(--floresta); border-radius: 50%; }
.depoimento figcaption strong { display: block; color: var(--floresta); }
.depoimento figcaption span span { display: block; font-size: var(--t-sm); color: var(--capim); }
.depoimento__foto { width: 44px; height: 44px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }

/* Chamada final */
.chamada-final { position: relative; overflow: hidden; }
.chamada-final__imagem { position: absolute; inset: 0; margin: 0; }
.chamada-final__imagem img { width: 100%; height: 100%; object-fit: cover; }
.chamada-final__imagem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(33, 58, 33, .94), rgba(33, 58, 33, .7)); }
.chamada-final__conteudo { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-5); }
.chamada-final__conteudo h2 { margin-bottom: var(--e-2); }
.chamada-final__conteudo p { max-width: 42rem; margin: 0; color: var(--sobre-escuro-suave); }
.chamada-final .grupo-botoes { margin-top: 0; }

/* Projetos sociais (Home): imagem com moldura Soja deslocada, texto e botão;
   abaixo, a faixa de logos das instituições apoiadas. */
.projetos-sociais__grade { display: grid; gap: var(--e-7); align-items: center; }
.projetos-sociais__imagem { position: relative; isolation: isolate; margin: 0 var(--e-3) var(--e-3) 0; }
.projetos-sociais__imagem img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--raio-3); }
.projetos-sociais__imagem::after { content: ""; position: absolute; z-index: -1; inset: var(--e-5) calc(-1 * var(--e-3)) calc(-1 * var(--e-3)) var(--e-5); border: 3px solid var(--soja); border-radius: var(--raio-3); }
.projetos-sociais__texto .conteudo-rico { color: var(--texto-suave); }
.projetos-sociais__texto .grupo-botoes { margin-top: var(--e-6); }
@media (min-width: 1024px) {
    .projetos-sociais__grade { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--e-8); }
    .projetos-sociais__grade--sem-imagem { grid-template-columns: minmax(0, 1fr); max-width: 52rem; }
    .projetos-sociais__imagem img { aspect-ratio: 5 / 4; }
}

/* Faixa de logos: rolagem nativa com encaixe (sem JavaScript também rola).
   O site.js mostra setas/pausa só quando os logos não cabem. */
.instituicoes-faixa { margin-top: var(--secao); padding-top: var(--e-6); border-top: 1px solid var(--borda); }
.instituicoes-faixa--no-bloco { margin-top: 0; padding-top: 0; border-top: 0; }
.instituicoes-faixa__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3) var(--e-5); margin-bottom: var(--e-5); }
.instituicoes-faixa--no-bloco .instituicoes-faixa__topo { justify-content: flex-end; margin-bottom: var(--e-4); }
.instituicoes-faixa__topo:has(> .sr-only:only-child), .instituicoes-faixa__topo:has(> [hidden]:only-child) { margin-bottom: 0; }
.instituicoes-faixa__titulo { margin: 0; font-size: var(--t-xl); }
.instituicoes-faixa__controles { display: flex; gap: var(--e-2); }
.carrossel__botao {
    display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
    color: var(--floresta); background: var(--branco); border: 2px solid var(--borda-forte); border-radius: 50%; cursor: pointer;
    transition: color var(--duracao) var(--curva), background-color var(--duracao) var(--curva), border-color var(--duracao) var(--curva);
}
.carrossel__botao:hover:not(:disabled) { color: var(--branco); background: var(--floresta); border-color: var(--floresta); }
.carrossel__botao:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 2px; }
.carrossel__botao:disabled { color: var(--borda-forte); cursor: default; }
.carrossel__botao .icone-site { width: 20px; height: 20px; stroke-width: 2.25; }
.carrossel__botao .carrossel__tocar { fill: currentColor; stroke: none; }
.carrossel__botao[aria-pressed="false"] .carrossel__tocar, .carrossel__botao[aria-pressed="true"] .carrossel__pausa { display: none; }
/* position: relative — os textos .sr-only (absolutos) dos links ficam presos ao trilho e não alargam a página. */
.instituicoes-faixa__trilho { position: relative; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; }
.instituicoes-faixa__trilho:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 4px; border-radius: var(--raio-cartao); }
/* Com o script, as setas substituem a barra de rolagem (toque e teclado continuam). */
.instituicoes-faixa--js .instituicoes-faixa__trilho { scrollbar-width: none; }
.instituicoes-faixa--js .instituicoes-faixa__trilho::-webkit-scrollbar { display: none; }
.instituicoes-faixa__lista { display: flex; gap: var(--e-4); margin: 0; padding: 2px; list-style: none; }
.instituicoes-faixa__lista > li { flex: 0 0 clamp(140px, 40vw, 180px); scroll-snap-align: start; }
@media (min-width: 720px) { .instituicoes-faixa__lista > li { flex-basis: calc((100% - 3 * var(--e-4)) / 4); } }
@media (min-width: 1024px) { .instituicoes-faixa__lista > li { flex-basis: calc((100% - 4 * var(--e-4)) / 5); } }
@media (min-width: 1280px) { .instituicoes-faixa__lista > li { flex-basis: calc((100% - 5 * var(--e-4)) / 6); } }

/* Quadro do logo: altura fixa, imagem contida (nunca esticada ou cortada). */
.logo-instituicao {
    display: flex; align-items: center; justify-content: center; height: 112px; padding: var(--e-4) var(--e-5);
    color: var(--floresta); text-decoration: none; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-cartao);
    transition: border-color var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva), transform var(--duracao) var(--curva);
}
.logo-instituicao img { width: 100%; height: 100%; object-fit: contain; }
a.logo-instituicao:hover { color: var(--floresta); border-color: var(--borda-forte); box-shadow: var(--sombra-2); transform: translateY(-2px); }
a.logo-instituicao:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 2px; }
.logo-instituicao__nome { font-size: var(--t-sm); font-weight: var(--peso-forte); line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.logo-instituicao__iniciais { font-size: var(--t-2xl); font-weight: var(--peso-titulo); letter-spacing: .04em; color: var(--capim); }

/* Bloco "Instituições apoiadas" em cartões (página /projetos-sociais). Cartões
   com largura máxima: 1 ou 2 instituições não viram faixas esticadas. */
.bloco__introducao { max-width: 60ch; margin: calc(-1 * var(--e-2)) 0 var(--e-6); color: var(--texto-suave); }
.instituicoes { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); margin: 0; padding: 0; list-style: none; }
.instituicao { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; padding: var(--e-4) var(--e-4) var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow-wrap: break-word; }
.instituicao .logo-instituicao { height: 128px; margin-bottom: var(--e-3); background: var(--fundo-suave); border-color: transparent; }
.instituicao__nome { margin: 0; font-size: var(--t-lg); }
.instituicao__descricao { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.instituicao__link { display: inline-flex; align-items: center; gap: var(--e-2); align-self: flex-start; min-height: 44px; margin-top: auto; font-size: var(--t-sm); font-weight: var(--peso-forte); }
.instituicao__link .icone-site { width: 16px; height: 16px; }
@media (min-width: 1024px) { .instituicoes { grid-template-columns: repeat(auto-fill, minmax(250px, 300px)); } }

/* ---------------------------------------------------------------- Cartões */
/* Cartão: superfície plana com filete; a sombra só aparece na interação. */
.cartao {
    display: flex; flex-direction: column; height: 100%; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-cartao); overflow: hidden;
    transition: box-shadow var(--duracao) var(--curva), border-color var(--duracao) var(--curva), transform var(--duracao) var(--curva);
}
.cartao:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
/* Cartão clicável sobe 2px na interação (desligado em movimento reduzido). */
.cartao--produto:hover, .cartao--produto:focus-within { transform: translateY(-2px); }
.cartao__imagem { aspect-ratio: 4 / 3; overflow: hidden; background: var(--fundo-suave); border-bottom: 3px solid var(--soja); }
.cartao__imagem--vazia { border-bottom-color: var(--capim); }
.cartao--noticia .cartao__imagem { aspect-ratio: 16 / 10; }
.cartao__imagem img { width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--curva); }
.cartao--produto:hover .cartao__imagem img { transform: scale(1.03); }
/* min-width 0 + quebra de palavras longas: títulos extensos (URLs, nomes
   compostos) não estouram a coluna da grade. */
.cartao__corpo { display: flex; flex-direction: column; gap: var(--e-2); flex: 1; min-width: 0; padding: var(--e-5); overflow-wrap: break-word; }
.cartao__corpo h3 { margin: 0; font-size: var(--t-lg); }
.cartao__corpo h3 a { color: inherit; text-decoration: none; }
.cartao__corpo h3 a:hover { text-decoration: underline; }
.cartao__corpo p { margin: 0; color: var(--texto-suave); font-size: var(--t-sm); }
.cartao__corpo .cartao__categoria { font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase; color: var(--capim); }

/* ---------------------------------------------------------------- Mídia */
.midia { margin: 0; }
.midia img { width: 100%; border-radius: var(--raio-3); }
.midia figcaption { margin-top: var(--e-2); font-size: var(--t-sm); color: var(--texto-suave); }

/* ---------------------------------------------------------------- Texto rico */
.conteudo-rico { max-width: var(--texto-largura); overflow-wrap: break-word; }
.conteudo-rico > :last-child { margin-bottom: 0; }
.conteudo-rico h2 { font-size: var(--t-2xl); margin-top: var(--e-6); }
.conteudo-rico h3 { margin-top: var(--e-5); }
.conteudo-rico li { margin-bottom: var(--e-2); }
.conteudo-rico blockquote { margin: var(--e-5) 0; padding: var(--e-2) 0 var(--e-2) var(--e-5); border-left: 4px solid var(--soja); font-size: var(--t-lg); color: var(--floresta); }

/* ---------------------------------------------------------------- Blocos de página */
.blocos { padding-block: var(--e-7) var(--secao); }
.bloco + .bloco { margin-top: var(--e-8); }
.bloco__titulo { margin-bottom: var(--e-5); }
.bloco--texto-imagem { display: grid; gap: var(--e-6); align-items: center; }
@media (min-width: 1024px) {
    .bloco--texto-imagem { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bloco--texto-imagem.bloco--imagem-esquerda .midia { order: -1; }
}
.bloco--destaque { padding: var(--e-7) var(--e-6); border-radius: var(--raio-3); background: var(--fundo-suave); border: 1px solid var(--borda); }
.bloco--destaque.escuro { background: var(--floresta); border-color: var(--floresta); }
.bloco--destaque h2 { font-size: var(--t-2xl); }
.bloco--destaque p { max-width: 60ch; }
.numeros { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); margin: 0; padding: 0; list-style: none; }
.numeros li { padding: var(--e-5); background: var(--fundo-suave); border-radius: var(--raio-3); }
.numeros strong { display: block; font-size: var(--t-2xl); font-weight: var(--peso-titulo); color: var(--floresta); line-height: 1.1; }
.numeros span { font-size: var(--t-sm); color: var(--texto-suave); }
.galeria { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); margin: 0; padding: 0; list-style: none; }
.galeria img { aspect-ratio: 4 / 3; object-fit: cover; }
/* Celular: duas colunas (antes, cada imagem ocupava a tela inteira); uma
   imagem só continua com a largura toda. */
@media (max-width: 719px) {
    .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
    .galeria > li:only-child { grid-column: 1 / -1; }
    .galeria figcaption { font-size: var(--t-xs); }
}
/* Galerias de até 3 imagens (ou múltiplos de 3) preenchem a linha no desktop. */
@media (min-width: 1024px) {
    .galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .galeria:has(> li:last-child:nth-child(-n+3)), .galeria:has(> li:last-child:nth-child(3n)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.acordeao { border-top: 1px solid var(--borda); }
.acordeao details { border-bottom: 1px solid var(--borda); }
.acordeao summary {
    display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); min-height: 56px; padding: var(--e-4) 0;
    font-size: var(--t-lg); font-weight: var(--peso-forte); color: var(--floresta); cursor: pointer; list-style: none;
}
.acordeao summary::-webkit-details-marker { display: none; }
.acordeao summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; display: grid; place-items: center; font-size: 1.25rem; border: 2px solid var(--borda-forte); border-radius: 50%; }
.acordeao details[open] summary::after { content: "−"; }
.acordeao__conteudo { padding: 0 0 var(--e-5); }
.colunas { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .colunas { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } }
.colunas h3 { margin-bottom: var(--e-3); }
.linha-tempo { position: relative; margin: 0; padding: 0 0 0 var(--e-6); list-style: none; border-left: 3px solid var(--borda); }
.linha-tempo li { position: relative; padding-bottom: var(--e-6); }
.linha-tempo li::before { content: ""; position: absolute; left: calc(-1 * var(--e-6) - 9px); top: .35em; width: 15px; height: 15px; background: var(--soja); border: 3px solid var(--floresta); border-radius: 50%; }
.linha-tempo__ano { display: block; font-size: var(--t-sm); font-weight: var(--peso-titulo); letter-spacing: .08em; color: var(--capim); }
.linha-tempo h3 { margin: var(--e-1) 0 var(--e-2); }
.linha-tempo .midia { max-width: 420px; margin-top: var(--e-3); }
.citacao { margin: 0; padding: var(--e-6); background: var(--fundo-suave); border-left: 6px solid var(--soja); border-radius: 0 var(--raio-3) var(--raio-3) 0; }
.citacao blockquote { margin: 0; font-size: var(--t-xl); font-weight: var(--peso-medio); line-height: 1.45; color: var(--floresta); }
.citacao figcaption { margin-top: var(--e-3); font-size: var(--t-sm); color: var(--texto-suave); }

/* Página legal: leitura longa */
.pagina--legal .blocos .conteudo-rico { font-size: var(--t-base); }
.pagina--legal .conteudo-rico h2 { font-size: var(--t-xl); }

/* ---------------------------------------------------------------- Rodapé */
/* Grade única na largura do container: marca (com redes) + colunas do menu
   do rodapé + contato. Desktop: uma trilha por bloco (quatro com o menu
   padrão), marca um pouco mais larga e nenhuma trilha menor que o próprio
   conteúdo (e-mail longo não transborda); tablet: 2 × 2; celular: marca e
   contato em largura total, colunas de links lado a lado.
   Alvos: 28 px com ponteiro fino, 36 px em tela de toque (WCAG 2.5.8 pede 24). */
.rodape { --rodape-alvo: 28px; padding-top: clamp(2.5rem, 1.75rem + 2vw, 3.5rem); background: var(--floresta-profunda); color: var(--sobre-escuro-suave); font-size: var(--t-sm); }
.rodape a { color: var(--sobre-escuro); text-decoration: none; }
.rodape a:hover { color: var(--soja); text-decoration: underline; }
.rodape ul { margin: 0; padding: 0; list-style: none; }
.rodape li + li { margin-top: 0; }
.rodape li a { display: inline-flex; align-items: center; min-height: var(--rodape-alvo); }
@media (pointer: coarse) { .rodape { --rodape-alvo: 36px; } }

.rodape__topo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-6) var(--e-5); padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.rodape__marca, .rodape__contato { grid-column: 1 / -1; }
@media (min-width: 640px) {
    .rodape__topo { column-gap: var(--e-6); }
    .rodape__marca, .rodape__contato { grid-column: auto; }
}
@media (min-width: 1024px) {
    .rodape__topo {
        grid-auto-flow: column; grid-template-columns: minmax(min-content, 1.3fr); grid-auto-columns: minmax(min-content, 1fr);
        column-gap: clamp(2rem, .5rem + 2.5vw, 4rem);
    }
}

.rodape__marca { display: flex; flex-direction: column; align-items: flex-start; gap: var(--e-3); }
.rodape__logos { display: flex; align-items: center; gap: var(--e-4); }
.rodape__logos img { width: 160px; height: auto; }
.rodape__logos .selo-grupo img { width: auto; height: 36px; max-width: 108px; object-fit: contain; }
.rodape__grupo { margin: 0; }
.rodape__redes { margin-top: var(--e-1); }
.rodape__redes ul { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.rodape .rodape__redes a {
    justify-content: center; width: 44px; height: 44px; min-height: 0; color: var(--sobre-escuro);
    border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--raio-total);
    transition: color var(--duracao) var(--curva), background-color var(--duracao) var(--curva), border-color var(--duracao) var(--curva);
}
.rodape .rodape__redes a:hover { color: var(--floresta-profunda); background: var(--soja); border-color: var(--soja); text-decoration: none; }
.rodape__redes a:focus-visible { outline-offset: 2px; border-radius: var(--raio-total); }
.rodape__redes .icone-site { width: 20px; height: 20px; stroke-width: 1.75; }
@media (prefers-reduced-motion: reduce) { .rodape .rodape__redes a { transition: none; } }

.rodape__coluna h2 { margin: 0 0 var(--e-2); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase; color: var(--soja); }

/* Contato: ícone discreto + dado; endereço/horário (texto livre) quebram linha. */
.rodape__canal { display: flex; align-items: flex-start; gap: var(--e-3); }
.rodape__canal .icone-site { width: 18px; height: 18px; margin-top: calc((var(--rodape-alvo) - 18px) / 2); color: var(--soja); stroke-width: 1.75; }
.rodape__canal a, .rodape__canal address, .rodape__canal p { min-width: 0; overflow-wrap: break-word; }
.rodape__canal address, .rodape__canal p { margin: 0; padding-block: calc((var(--rodape-alvo) - 1.5em) / 2); font-style: normal; line-height: 1.5; }
.rodape__acao { padding-left: calc(18px + var(--e-3)); }
.rodape__canal + .rodape__acao { margin-top: var(--e-1); }

/* Base: copyright à esquerda, políticas e cookies à direita. Espaço à direita
   para o botão de voltar ao topo não cobrir o último item. */
.rodape__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 var(--e-5); padding-block: var(--e-3); padding-right: 64px; font-size: var(--t-xs); border-top: 1px solid rgba(255, 255, 255, .16); }
.rodape__base p { margin: 0; padding-block: var(--e-2); }
.rodape__legal, .rodape__legal ul { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--e-5); }

/* ---------------------------------------------------------------- Produtos (Fase 8) */
/* Cartão inteiro clicável pelo link do título (um só link por cartão). */
.cartao--produto { position: relative; }
.cartao--produto .cartao__titulo { margin: 0; font-size: var(--t-lg); font-weight: var(--peso-forte); }
.cartao--produto .cartao__titulo a { color: inherit; text-decoration: none; }
.cartao--produto .cartao__titulo a::after { content: ""; position: absolute; inset: 0; border-radius: var(--raio-3); }
/* O foco contorna o cartão inteiro; sem suporte a :has(), fica no próprio link. */
@supports selector(:has(a)) {
    .cartao--produto .cartao__titulo a:focus-visible { outline: none; }
    .cartao--produto:has(.cartao__titulo a:focus-visible) { outline: var(--foco-largura) solid var(--foco); outline-offset: 3px; }
    .cartao--produto:has(.cartao__titulo a:focus-visible) .cartao__imagem img { transform: scale(1.03); }
}
.cartao--produto:hover .cartao__titulo a { text-decoration: underline; }
.cartao__imagem.cartao__imagem--vazia { background: var(--floresta) radial-gradient(circle at 80% 20%, rgba(86, 118, 57, .6), transparent 60%); }
.cartao__mais { display: inline-flex; align-items: center; gap: var(--e-2); margin-top: auto; padding-top: var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--capim); }
.cartao__mais .icone-site { width: 18px; height: 18px; }

/* Projetos (Fase 11): reutilizam o cartão e a apresentação do produto. */
.cartao__corpo .cartao__meta { font-size: var(--t-xs); color: var(--texto-suave); }
.projeto__dados { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); margin: 0; padding: var(--e-5); background: var(--fundo-suave); border-radius: var(--raio-3); }
.projeto__dados dt { font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .08em; text-transform: uppercase; color: var(--capim); }
.projeto__dados dd { margin: var(--e-1) 0 0; color: var(--texto); }

.produto__grade { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
.produto__capa img { aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--sombra-2); }
.produto__texto > * + * { margin-top: var(--e-6); }
.produto__texto .grupo-botoes { margin-top: var(--e-6); }
@media (min-width: 1024px) {
    .produto__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--e-8); }
    .produto__grade--sem-imagem { grid-template-columns: minmax(0, 1fr); }
}

.ficha-tecnica { display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-5); background: var(--fundo-suave); border: 1px solid var(--borda); border-left: 6px solid var(--soja); border-radius: var(--raio-3); }
.ficha-tecnica__icone { width: 2.5rem; height: 2.5rem; color: var(--capim); }
.ficha-tecnica__titulo { margin: 0 0 var(--e-2); font-size: var(--t-lg); font-weight: var(--peso-forte); }
.ficha-tecnica p { margin: 0 0 var(--e-4); color: var(--texto-suave); font-size: var(--t-sm); }
.ficha-tecnica__tamanho { font-weight: var(--peso-normal); }
.ficha-tecnica .botao { white-space: nowrap; }
@media (max-width: 479px) { .ficha-tecnica { flex-direction: column; } }

.especificacoes { width: 100%; border-collapse: collapse; font-size: var(--t-base); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); overflow: hidden; }
.especificacoes th, .especificacoes td { padding: var(--e-3) var(--e-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--borda); overflow-wrap: anywhere; }
.especificacoes tr:last-child th, .especificacoes tr:last-child td { border-bottom: 0; }
.especificacoes th { width: 45%; font-weight: var(--peso-medio); color: var(--texto-suave); }
.especificacoes td { font-weight: var(--peso-forte); color: var(--floresta); }
.especificacoes__unidade { font-weight: var(--peso-normal); color: var(--texto-suave); }

.container--video { max-width: calc(960px + 2 * var(--gutter)); }
.video { margin: 0; }
.video__fachada, .video__player {
    position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
    color: var(--sobre-escuro); text-decoration: none; background: var(--floresta) radial-gradient(circle at 75% 25%, rgba(86, 118, 57, .7), transparent 60%);
    border-radius: var(--raio-3); box-shadow: var(--sombra-2);
}
.video__player { border: 0; display: block; }
.video__capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__fachada::after { content: ""; position: absolute; inset: 0; background: rgba(33, 58, 33, .35); transition: background-color var(--duracao) var(--curva); }
.video__fachada:hover::after { background: rgba(33, 58, 33, .15); }
.video__fachada:hover, .video__fachada:focus-visible { color: var(--sobre-escuro); }
.video__botao { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; color: var(--preto); background: var(--soja); border-radius: 50%; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); }
.video__botao .icone-site { width: 34px; height: 34px; margin-left: 4px; fill: currentColor; }
.video__rotulo { position: absolute; z-index: 1; left: var(--e-4); bottom: var(--e-4); padding: var(--e-1) var(--e-3); font-size: var(--t-sm); font-weight: var(--peso-forte); background: rgba(33, 58, 33, .85); border-radius: var(--raio-2); }
.video__aviso { margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--texto-suave); }

.lista-unidades { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
.lista-unidades li { padding: var(--e-4); background: var(--fundo-suave); border-radius: var(--raio-3); }
/* Sobre faixa suave, o fundo suave do item sumia: cartão branco com filete. */
.secao--suave .lista-unidades li, .secao--suave .unidade { background: var(--branco); border: 1px solid var(--borda); }
.lista-unidades span { display: block; font-size: var(--t-sm); color: var(--texto-suave); }

.grupo-botoes--centro { justify-content: center; }

/* ---------------------------------------------------------------- Processo (Fase 8) */
.processo__introducao { margin-bottom: var(--e-7); }
.processo__titulo-etapas { margin-bottom: var(--e-6); }
.passos { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.passo { position: relative; display: grid; gap: var(--e-4) var(--e-5); grid-template-columns: 52px minmax(0, 1fr); padding-bottom: var(--e-7); }
.passo:not(:last-child)::before { content: ""; position: absolute; top: 60px; bottom: var(--e-2); left: 25px; width: 2px; background: var(--borda-forte); }
.passo__numero {
    display: grid; place-items: center; width: 52px; height: 52px;
    font-size: var(--t-lg); font-weight: var(--peso-titulo); color: var(--soja); background: var(--floresta); border-radius: 50%;
}
.passo__texto { min-width: 0; padding-top: var(--e-2); }
.passo__texto h3 { margin-bottom: var(--e-2); }
.passo__icone { width: 2rem; height: 2rem; margin-bottom: var(--e-3); color: var(--capim); }
.passo__resumo { font-size: var(--t-lg); color: var(--texto-suave); }
.passo__imagem { grid-column: 2; }
.passo__imagem img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1024px) {
    /* Imagem mais baixa (16:10) e coluna menor: o texto curto da etapa não
       deixa mais um vão de ~250 px até a etapa seguinte. */
    .passo { grid-template-columns: 52px minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--e-5) var(--e-7); }
    .passo__imagem img { aspect-ratio: 16 / 10; }
    .passo--sem-imagem .passo__texto { grid-column: 2 / -1; max-width: var(--texto-largura); }
    .passo__imagem { grid-column: 3; }
}

/* ---------------------------------------------------------------- Representantes e unidades (Fase 9) */
.presenca__ufs { margin: 0 0 var(--e-4); font-size: var(--t-sm); font-weight: var(--peso-forte); letter-spacing: .04em; color: var(--sobre-escuro); }
.presenca__ufs span:first-child { font-weight: var(--peso-normal); color: var(--sobre-escuro-suave); }
.presenca__ufs abbr { text-decoration: none; }

.filtro-representantes { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: end; padding: var(--e-5); background: var(--fundo-suave); border: 1px solid var(--borda); border-radius: var(--raio-3); }
@media (min-width: 720px) { .filtro-representantes { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; } }
.filtro-representantes__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.campo-site { display: flex; flex-direction: column; gap: var(--e-2); min-width: 0; }
.campo-site label { font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--floresta); }
.campo-site select, .campo-site input[type="text"] {
    width: 100%; min-height: 48px; padding: var(--e-2) var(--e-3); font: inherit; color: var(--texto);
    background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-2);
}
.campo-site select:focus-visible, .campo-site input:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 1px; }
.campo-site__ajuda { margin: 0; font-size: var(--t-xs); color: var(--texto-suave); }
/* Desktop: a ajuda fica sob o campo sem desalinhar os botões da linha. */
@media (min-width: 720px) {
    .campo-site--municipio { position: relative; }
    .campo-site--municipio .campo-site__ajuda { position: absolute; top: calc(100% + 4px); left: 0; }
    .filtro-representantes { padding-bottom: var(--e-7); }
}

.autocomplete { position: relative; }
.autocomplete__lista {
    position: absolute; z-index: 20; left: 0; right: 0; top: 100%; max-height: 18rem; overflow-y: auto; margin: 0; padding: var(--e-1); list-style: none;
    background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-2); box-shadow: var(--sombra-2);
}
.autocomplete__lista [role="option"] { padding: var(--e-2) var(--e-3); border-radius: var(--raio-1); cursor: pointer; }
.autocomplete__lista [role="option"][aria-selected="true"], .autocomplete__lista [role="option"]:hover { color: var(--branco); background: var(--floresta); }

.representantes__resultado h2 { font-size: var(--t-2xl); }
.representantes__resultado h2:focus { outline: none; }
.representantes__regiao { color: var(--texto-suave); }
.aviso-site { max-width: 60ch; padding: var(--e-4) var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-left: 6px solid var(--soja); border-radius: var(--raio-2); }
.aviso-site p { margin: 0; }
.lista-escolha { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: 0; padding: 0; list-style: none; }
.lista-escolha a { font-weight: var(--peso-forte); }

.grade-representantes { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.representante { display: flex; flex-direction: column; gap: var(--e-3); height: 100%; padding: var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-1); }
.representante__topo { display: flex; gap: var(--e-4); align-items: center; }
.representante__topo h3 { margin: 0; font-size: var(--t-lg); }
.representante__foto { width: 72px; height: 72px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.representante__avatar { display: grid; place-items: center; width: 72px; height: 72px; flex-shrink: 0; font-size: var(--t-lg); font-weight: var(--peso-titulo); color: var(--soja); background: var(--floresta); border-radius: 50%; }
.representante__cargo { margin: var(--e-1) 0 0; font-size: var(--t-sm); color: var(--texto-suave); }
.representante__regioes { margin: 0; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--capim); }
.representante__contatos { display: grid; gap: var(--e-2); margin: auto 0 0; padding: var(--e-3) 0 0; list-style: none; border-top: 1px solid var(--borda); }
.representante__contatos a { display: flex; flex-wrap: wrap; gap: 0 var(--e-2); align-items: baseline; min-height: 44px; padding: var(--e-2) 0; overflow-wrap: anywhere; }
.representante__tipo { min-width: 5.5rem; font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }

.lista-unidades-site { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); margin: 0; padding: 0; list-style: none; }
.unidade { padding: var(--e-5); background: var(--fundo-suave); border-radius: var(--raio-3); }
.unidade__nome { margin: 0 0 var(--e-1); font-size: var(--t-lg); }
.unidade__tipo { margin: 0 0 var(--e-2); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .08em; text-transform: uppercase; color: var(--capim); }
.unidade__endereco { margin: 0 0 var(--e-3); font-size: var(--t-sm); color: var(--texto-suave); }
.unidade__contatos { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.unidade__contatos li + li { margin-top: var(--e-1); }
.unidade__contatos span { color: var(--texto-suave); }

/* ---------------------------------------------------------------- Onde estamos e mapa (Fase 10) */
.botao--pequeno { min-height: 44px; padding: var(--e-2) var(--e-4); }
.texto-nota { margin: var(--e-3) 0 0; font-size: var(--t-sm); color: var(--texto-suave); }

.destaque-safra { display: grid; gap: var(--e-1); margin-top: var(--e-6); padding: var(--e-4) var(--e-5); color: var(--preto); background: var(--soja); border-radius: var(--raio-3); }
.destaque-safra p { margin: 0; }
.destaque-safra__titulo { font-weight: var(--peso-titulo); }
.destaque-safra__periodo { font-size: var(--t-sm); }

.onde-estamos__titulo-busca { font-size: var(--t-2xl); }
.onde-estamos__titulo-busca:focus, .onde-estamos__resultado h2:focus { outline: none; }
.filtro-mapa { display: grid; gap: var(--e-4); grid-template-columns: minmax(0, 1fr); align-items: end; padding: var(--e-5); background: var(--fundo-suave); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.filtro-mapa__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3); }
@media (min-width: 720px) {
    .filtro-mapa { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); padding-bottom: var(--e-7); }
    .filtro-mapa__acoes { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
    .filtro-mapa { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    .filtro-mapa__acoes { grid-column: auto; }
}
.origem-alternativa { display: grid; gap: var(--e-5); margin-top: var(--e-5); grid-template-columns: minmax(0, 1fr); }
.origem-alternativa:empty { display: none; }
.origem-alternativa__cep { display: grid; gap: var(--e-3); grid-template-columns: minmax(0, 1fr); align-items: end; }
.origem-alternativa__cep .campo-site__ajuda { grid-column: 1 / -1; }
.origem-alternativa__cep input { max-width: 14rem; }
.origem-alternativa__gps { display: grid; gap: var(--e-2); align-content: end; justify-items: start; }
@media (min-width: 720px) {
    .origem-alternativa { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
    .origem-alternativa__cep { grid-template-columns: minmax(0, 14rem) auto; }
}
.filtro-mapa + .origem-alternativa + .aviso-site, .origem-alternativa + .aviso-site { margin-top: var(--e-4); }
.geo-resultado { margin-top: var(--e-5); padding: var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.geo-resultado__status { margin: 0 0 var(--e-3); font-weight: var(--peso-medio); }
.geo-resultado ol { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding-left: 1.4em; }

.onde-estamos__resultado h2 { font-size: var(--t-2xl); }
.onde-estamos__origem { color: var(--texto-suave); }
.resultado-grade { display: grid; gap: var(--e-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .resultado-grade { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.resultado-bloco h3 { margin-bottom: var(--e-4); }
.resultado-bloco .grade-representantes { grid-template-columns: minmax(0, 1fr); }
.estimativas { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; counter-reset: estimativa; }
.estimativa { position: relative; padding: var(--e-4) var(--e-4) var(--e-4) var(--e-8); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); counter-increment: estimativa; }
.estimativa::before { content: counter(estimativa); position: absolute; left: var(--e-4); top: var(--e-4); display: grid; place-items: center; width: 2rem; height: 2rem; font-weight: var(--peso-titulo); color: var(--floresta); background: var(--fundo-suave); border-radius: 50%; }
.estimativa p { margin: 0; }
.estimativa__unidade a { font-weight: var(--peso-forte); }
.estimativa__unidade span, .estimativa__valores span { font-size: var(--t-sm); color: var(--texto-suave); }
.estimativa__valores { margin-top: var(--e-1) !important; }
.estimativa__rotas { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); margin-top: var(--e-2) !important; font-size: var(--t-sm); }
.estimativa__rotas a, .unidade__rota { display: inline-flex; align-items: center; min-height: 44px; }
.fonte-estimativa { margin: var(--e-4) 0 0; font-size: var(--t-xs); color: var(--texto-suave); }

/* Mapa explorável (MATOPIBA → UF → município): mapa + painel lateral no desktop; folha inferior no mobile. */
.explorar { --altura-palco: min(78vh, 760px); display: grid; grid-template-columns: minmax(0, 1fr); background: var(--fundo-suave); border-block: 1px solid var(--borda); }
@media (min-width: 1024px) { .explorar { grid-template-columns: minmax(0, 1fr) 400px; min-height: var(--altura-palco); } }
.explorar__palco { position: relative; display: flex; flex-direction: column; min-width: 0; }
.explorar__mapa { position: relative; z-index: 0; flex: 1; min-height: 58vh; overflow: hidden; background: radial-gradient(circle at 30% 20%, #EEF2EA, #DCE4D6 70%); }
@media (min-width: 1024px) { .explorar__mapa { min-height: var(--altura-palco); } }
.explorar__mapa.leaflet-container { background: radial-gradient(circle at 30% 20%, #EEF2EA, #DCE4D6 70%); }
.mapa__aviso { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: var(--e-5); text-align: center; color: var(--texto-suave); }
.mapa__ajuda, .mapa__fontes { margin: var(--e-4) 0 0; font-size: var(--t-xs); color: var(--texto-suave); }

.trilha-mapa { position: absolute; z-index: 500; top: var(--e-4); left: 64px; right: var(--e-4); pointer-events: none; }
.trilha-mapa[hidden] { display: none; }
.trilha-mapa ol { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); margin: 0; padding: var(--e-1); list-style: none; background: rgba(255, 255, 255, .94); border: 1px solid var(--borda); border-radius: var(--raio-total); box-shadow: var(--sombra-2); pointer-events: auto; }
.trilha-mapa li { display: inline-flex; align-items: center; }
.trilha-mapa li + li::before { content: "›"; margin-inline: var(--e-1); color: var(--texto-suave); }
.trilha-mapa button { min-height: 36px; padding: 0 var(--e-3); font: inherit; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--capim); background: none; border: 0; border-radius: var(--raio-total); cursor: pointer; }
.trilha-mapa button:hover { color: var(--floresta); background: var(--fundo-suave); }
.trilha-mapa span { padding: 0 var(--e-3); font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--floresta); }

.legenda-explorar { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin: 0; padding: var(--e-3) var(--e-4); list-style: none; font-size: var(--t-xs); background: var(--branco); border-top: 1px solid var(--borda); }
@media (max-width: 1023px) { .legenda-explorar { padding-bottom: calc(var(--e-3) + 20px); } }
.legenda-explorar li { display: inline-flex; align-items: center; gap: var(--e-2); }
.mapa-legenda__tipo { color: var(--texto-suave); }
.mapa-legenda__camada { width: 22px; height: 4px; background: var(--floresta); border-radius: 2px; }
.mapa-legenda__camada--capim { background: var(--capim); }
.mapa-legenda__camada--soja { background: #8C8C2E; }
.mapa-legenda__camada--terra { background: #8A5A3C; }
.mapa-legenda__camada--cinza { background: #5E665A; }

/* Amostras de cobertura (legenda, listas, painel e seção textual). Mesmos valores do mapa.js. */
.amostra, .mapa-ufs__marca { display: inline-block; width: 20px; height: 14px; flex-shrink: 0; background: var(--branco); border: 1px solid #8C9884; border-radius: 3px; }
.amostra--integral, .cobertura-uf--integral .mapa-ufs__marca { background: rgba(86, 118, 57, .55); border: 2px solid var(--floresta); }
.amostra--parcial, .cobertura-uf--parcial .mapa-ufs__marca { background: repeating-linear-gradient(135deg, rgba(188, 188, 66, .8) 0 2px, #FBFBF2 2px 7px); border: 2px dashed var(--floresta); }
.amostra--municipio { background: rgba(86, 118, 57, .78); border: 2px solid var(--floresta); }
.amostra-pino { width: 12px; height: 12px; flex-shrink: 0; background: var(--floresta); border: 3px solid var(--soja); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }

/* Geometrias e rótulos */
.leaflet-interactive { transition: fill-opacity .25s ease, stroke-width .2s ease, opacity .35s ease; }
path.uf-exploravel { filter: drop-shadow(0 6px 10px rgba(22, 26, 22, .16)); }
path.mapa-mun, path.mapa-mun-local { animation: mapa-surgir .5s ease both; }
@keyframes mapa-surgir { from { opacity: 0; } }
.leaflet-tooltip.rotulo-uf { padding: 0; font-size: 13px; font-weight: var(--peso-titulo); letter-spacing: .08em; color: var(--floresta); background: none; border: 0; box-shadow: none; text-shadow: 0 0 3px #FFFFFF, 0 0 6px #FFFFFF; transition: opacity .3s ease; }
.leaflet-tooltip.rotulo-uf::before { display: none; }
.leaflet-tooltip.rotulo-uf--apagado { opacity: .35 !important; }
.leaflet-tooltip.rotulo-uf--oculto { opacity: 0 !important; }
.leaflet-tooltip.mapa-dica { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--texto); border-radius: var(--raio-2); box-shadow: var(--sombra-2); }
.tocar-explorar { position: absolute; z-index: 600; left: 50%; bottom: var(--e-4); transform: translateX(-50%); min-height: 44px; padding: 0 var(--e-5); font: inherit; font-size: var(--t-sm); font-weight: var(--peso-forte); white-space: nowrap; color: var(--branco); background: rgba(44, 77, 44, .92); border: 0; border-radius: var(--raio-total); box-shadow: var(--sombra-2); cursor: pointer; }
.tocar-explorar--ativo { top: 72px; bottom: auto; left: auto; right: var(--e-3); transform: none; color: var(--floresta); background: var(--branco); border: 2px solid var(--floresta); }

/* Painel */
.explorar__painel { position: relative; z-index: 1; margin-top: -20px; padding: var(--e-3) var(--e-5) var(--e-6); background: var(--branco); border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(22, 26, 22, .12); }
.explorar__alca { width: 44px; height: 5px; margin: 0 auto var(--e-4); background: var(--borda-forte); border-radius: 3px; }
@media (min-width: 1024px) {
    .explorar__painel { margin: 0; max-height: var(--altura-palco); overflow-y: auto; padding: var(--e-6); border-radius: 0; border-left: 1px solid var(--borda); box-shadow: none; }
    .explorar__alca { display: none; }
}
.painel-bloco { animation: painel-entrar .35s ease both; }
@keyframes painel-entrar { from { opacity: 0; transform: translateY(8px); } }
.painel-sobre { margin: 0 0 var(--e-1); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .12em; text-transform: uppercase; color: var(--capim); }
.painel-titulo { margin: 0 0 var(--e-3); font-size: var(--t-2xl); line-height: 1.15; }
.painel-titulo .selo-demonstrativo { margin-left: var(--e-2); }
.painel-titulo:focus { outline: none; }
.painel-titulo:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 4px; }
.painel-texto { margin: 0 0 var(--e-4); font-size: var(--t-sm); color: var(--texto-suave); }
.painel-nota { margin: var(--e-3) 0 0; padding-left: var(--e-3); font-size: var(--t-xs); color: var(--texto-suave); border-left: 3px solid var(--borda-forte); }
.painel-sub { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-forte); letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.painel-regioes, .painel-contatos { margin: 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.painel-regioes li, .painel-contatos li { margin-bottom: var(--e-2); }
.situacao { display: flex; gap: var(--e-3); align-items: flex-start; margin: 0 0 var(--e-4); padding: var(--e-3) var(--e-4); font-size: var(--t-sm); background: rgba(86, 118, 57, .12); border: 2px solid var(--floresta); border-radius: var(--raio-2); }
.situacao strong { display: block; color: var(--floresta); }
.situacao .amostra { margin-top: 3px; }
.situacao--parcial { background: rgba(188, 188, 66, .18); border-style: dashed; }
.situacao--sem { background: var(--fundo-suave); border: 1px solid var(--borda-forte); }
.cartao-rep { margin: 0 0 var(--e-2); padding: var(--e-3) var(--e-4); font-size: var(--t-sm); border: 1px solid var(--borda); border-radius: var(--raio-2); }
.cartao-rep strong { display: block; color: var(--floresta); }
.cartao-rep__cargo, .cartao-rep__contato { display: block; color: var(--texto-suave); }
.cartao-rep__contato a { display: inline-flex; align-items: center; min-height: 32px; }

.lista-painel { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.lista-painel--mun { gap: var(--e-1); max-height: 320px; overflow-y: auto; }
.lista-painel button, .lista-painel a { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1) var(--e-3); width: 100%; min-height: 48px; padding: var(--e-2) var(--e-3); font: inherit; text-align: left; text-decoration: none; color: var(--texto); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-2); cursor: pointer; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.lista-painel--mun button { min-height: 44px; }
.lista-painel button:hover, .lista-painel a:hover { color: var(--texto); border-color: var(--floresta); box-shadow: var(--sombra-1); transform: translateX(2px); }
.lista-painel__nome { font-weight: var(--peso-forte); color: var(--floresta); }
.lista-painel__estado { margin-left: auto; font-size: var(--t-xs); color: var(--texto-suave); text-align: right; }
.lista-painel__marca { width: 10px; height: 10px; flex-shrink: 0; background: var(--branco); border: 1px solid #8C9884; border-radius: 50%; }
.lista-painel__marca--sim { background: var(--capim); border-color: var(--floresta); }
.lista-painel__mais { padding: var(--e-2); font-size: var(--t-xs); color: var(--texto-suave); }
.busca-mun { margin: 0 0 var(--e-3); }
.busca-mun label { display: block; margin-bottom: var(--e-1); font-size: var(--t-sm); font-weight: var(--peso-medio); }
.busca-mun input { width: 100%; min-height: 48px; padding: var(--e-2) var(--e-3); font: inherit; color: var(--texto); background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-2); }
.acoes-painel { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.acoes-painel a, .acoes-painel button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: var(--e-2) var(--e-4); font: inherit; font-weight: var(--peso-forte); text-align: center; text-decoration: none; color: var(--floresta); background: transparent; border: 2px solid var(--floresta); border-radius: var(--raio-2); cursor: pointer; }
.acoes-painel .acoes-painel__principal { color: var(--preto); background: var(--soja); border-color: var(--soja); }
.acoes-painel .acoes-painel__principal:hover { background: var(--soja-hover); border-color: var(--soja-hover); }
.mapa-painel__acoes { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); margin: 0; font-size: var(--t-sm); }
.mapa-painel__acoes a { display: inline-flex; align-items: center; min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
    .leaflet-interactive, .lista-painel button, .lista-painel a, .leaflet-tooltip.rotulo-uf { transition: none; }
    path.mapa-mun, path.mapa-mun-local, .painel-bloco { animation: none; }
}

/* Pinos (elementos criados pelo mapa.js; nada de estilo inline). */
.mapa-pino { background: transparent; border: 0; cursor: pointer; }
.mapa-pino::before { content: ""; position: absolute; left: 3px; top: 0; width: 24px; height: 24px; background: var(--floresta); border: 3px solid var(--soja); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 2px 6px rgba(0, 0, 0, .3); }
.mapa-pino:focus-visible { outline: var(--foco-largura) solid var(--floresta); outline-offset: 4px; border-radius: 50%; }
.mapa-pino--ativo::before { background: var(--soja); border-color: var(--floresta); }
.mapa-voce { background: var(--texto); border: 3px solid var(--branco); border-radius: 50%; box-shadow: 0 0 0 2px var(--texto); }

.cobertura-ufs { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); margin-top: var(--e-5); }
.cobertura-uf { padding: var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-left: 6px solid var(--capim); border-radius: var(--raio-3); scroll-margin-top: calc(var(--altura-topo) + var(--e-4)); }
.cobertura-uf--parcial { border-left: 6px dashed var(--soja); }
.cobertura-uf:focus { outline: var(--foco-largura) solid var(--foco); outline-offset: 2px; }
.cobertura-uf h3 { margin-bottom: var(--e-2); font-size: var(--t-lg); }
.cobertura-uf__tipo { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-3); font-weight: var(--peso-forte); color: var(--floresta); }
.cobertura-uf__regioes, .cobertura-uf__representantes { margin: var(--e-2) 0; padding: 0; list-style: none; font-size: var(--t-sm); }
.cobertura-uf__regioes li, .cobertura-uf__representantes li { margin-bottom: var(--e-3); }
.cobertura-uf__regioes summary { color: var(--capim); cursor: pointer; }
.cobertura-uf__subtitulo { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-base); }
.cobertura-uf__cargo, .cobertura-uf__contato { display: block; }
.cobertura-uf__cargo { color: var(--texto-suave); }
.cobertura-uf__contato a { display: inline-flex; align-items: center; min-height: 32px; }
/* Cobertura demonstrativa (só fora de produção): nunca confundir com atendimento real. */
.selo-demonstrativo { display: inline-block; padding: 0 var(--e-2); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .04em; text-transform: uppercase; color: var(--preto); background: var(--soja); border-radius: var(--raio-2); vertical-align: middle; }
.aviso-demonstrativo { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); font-size: var(--t-sm); color: var(--texto); background: rgba(188, 188, 66, .2); border-left: 4px solid var(--soja); border-radius: var(--raio-2); }
.leaflet-container { font-family: var(--fonte); background: #E4EAE0; }
.leaflet-container a.leaflet-control-zoom-in, .leaflet-container a.leaflet-control-zoom-out { width: 44px; height: 44px; line-height: 44px; font-size: 22px; color: var(--floresta); }
.leaflet-control-attribution { font-size: 11px; }
.leaflet-tooltip { font-family: var(--fonte); }

.unidade--selecionada { outline: 3px solid var(--soja); outline-offset: 2px; }
.unidade:focus { outline: 3px solid var(--floresta); outline-offset: 2px; }
.unidade__produtos { margin: var(--e-3) 0 0; font-size: var(--t-sm); }
.unidade__produtos span { color: var(--texto-suave); }
.unidade__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); align-items: center; margin-top: var(--e-3); font-size: var(--t-sm); }

.vazio-mapa { max-width: 60ch; padding: var(--e-6); background: var(--fundo-suave); border-radius: var(--raio-3); }
.vazio-mapa__titulo { font-size: var(--t-lg); font-weight: var(--peso-forte); color: var(--floresta); }

.modalidades { display: grid; gap: var(--e-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.modalidade { padding: var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.modalidade p { margin: 0; white-space: pre-line; }

/* Mapa estático da Home (SVG gerado no servidor). */
.mapa-estatico { width: 100%; height: auto; border-radius: var(--raio-3); background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); }
.mapa-estatico__uf { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-linejoin: round; }
.mapa-estatico__uf--atendida { fill: rgba(86, 118, 57, .75); stroke: rgba(188, 188, 66, .7); }
.mapa-estatico__uf--parcial { fill: rgba(188, 188, 66, .28); stroke: var(--soja); stroke-width: 2; stroke-dasharray: 6 4; }
.presenca__parcial { font-size: var(--t-sm); color: var(--sobre-escuro-suave); }
.mapa-estatico__ponto { fill: var(--soja); stroke: var(--floresta); stroke-width: 3; }

/* ---------------------------------------------------------------- Estado vazio e erro */
.vazio { padding-block: var(--secao); text-align: center; }
.vazio h1, .vazio h2 { margin-inline: auto; max-width: 24ch; }
.vazio p { max-width: 48ch; margin-inline: auto; color: var(--texto-suave); }
.erro__codigo { margin: 0 0 var(--e-2); font-size: var(--t-sm); font-weight: var(--peso-forte); letter-spacing: .12em; color: var(--capim); }
.erro__detalhe { max-width: 100%; margin-top: var(--e-6); padding: var(--e-4); overflow: auto; font-size: var(--t-xs); text-align: left; background: var(--fundo-suave); }

/* ---------------------------------------------------------------- Pré-visualização (painel) */
.aviso-previa {
    position: sticky; top: 0; z-index: calc(var(--z-topo) + 1); padding: var(--e-2) var(--gutter);
    font-size: var(--t-sm); font-weight: var(--peso-forte); text-align: center; color: var(--preto); background: var(--soja);
}
.aviso-previa + .topo { top: 36px; }

/* ---------------------------------------------------------------- Notícias (Fase 12) */
/* Filtro por categoria (também em /projetos-sociais): links, sem JavaScript. */
.filtro-categorias ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.filtro-categorias a {
    display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-sm); font-weight: var(--peso-medio);
    color: var(--floresta); text-decoration: none; background: var(--branco); border: 1px solid var(--borda-forte); border-radius: 999px;
}
.filtro-categorias a:hover { border-color: var(--floresta); text-decoration: underline; }
.filtro-categorias a[aria-current="page"] { color: var(--branco); background: var(--floresta); border-color: var(--floresta); }
.secao > .container > .filtro-categorias { margin-bottom: var(--e-6); }

.noticias__ferramentas { display: grid; gap: var(--e-5); margin-bottom: var(--e-6); }
.busca-noticias { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--e-3); max-width: 40rem; }
.busca-noticias .campo-site { flex: 1 1 14rem; }
.campo-site input[type="search"] {
    min-height: 44px; padding: var(--e-2) var(--e-3); font: inherit; color: var(--texto); background: var(--branco);
    border: 1px solid var(--borda-forte); border-radius: var(--raio-2);
}
.campo-site input[type="search"]:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 1px; }
.busca-noticias__limpar { align-self: center; font-size: var(--t-sm); }
.noticias__resultado { margin: 0 0 var(--e-5); font-weight: var(--peso-medio); color: var(--texto); }

/* Cartões: o primeiro da página 1 ocupa duas colunas em telas largas. */
@media (min-width: 720px) {
    .cartao--noticia-destaque { grid-column: span 2; }
    .cartao--noticia-destaque .cartao__titulo { font-size: var(--t-xl); }
}
.cartao--noticia .cartao__meta { margin-top: auto; padding-top: var(--e-2); }

.paginacao-site { margin-top: var(--e-7); }
.paginacao-site ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.paginacao-site a, .paginacao-site [aria-current="page"], .paginacao-site__reticencias {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--e-3); font-weight: var(--peso-medio);
    border-radius: var(--raio-3);
}
.paginacao-site a { color: var(--floresta); border: 1px solid var(--borda-forte); text-decoration: none; }
.paginacao-site a:hover { border-color: var(--floresta); text-decoration: underline; }
.paginacao-site [aria-current="page"] { color: var(--branco); background: var(--floresta); }

/* Detalhe */
.noticia__categoria { margin: 0 0 var(--e-2); font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .1em; text-transform: uppercase; }
.noticia__categoria a { display: inline-flex; align-items: center; min-height: 24px; color: var(--capim); }
/* Artigo centralizado na grade: moldura de 960 px (capa horizontal, galeria e
   imagens do corpo) e, dentro dela, uma coluna de leitura de 46rem (~75–80
   caracteres por linha) também centralizada, compartilhada por trilha, título,
   resumo, metadados, texto, compartilhamento e botão — uma só borda esquerda.
   Antes tudo ficava na borda esquerda do container de 1320 px, limitado a
   72ch, deixando a metade direita vazia. A capa mantém a proporção original:
   quadrada e vertical ficam mais estreitas, com a legenda na largura da
   imagem. Escopo: só .noticia ("Leia também" segue no container principal). */
.noticia { --noticia-largura: 960px; --noticia-texto: 46rem; }
.noticia .cabecalho-pagina .container { max-width: calc(var(--noticia-texto) + 2 * var(--gutter)); }
.noticia .cabecalho-pagina h1 { max-width: none; }
.noticia .cabecalho-pagina__resumo { max-width: none; }
.noticia__meta { display: flex; flex-wrap: wrap; gap: var(--e-1) var(--e-5); margin: var(--e-4) 0 0; padding: 0; list-style: none; font-size: var(--t-sm); color: var(--texto-suave); }
.noticia__coluna { max-width: calc(var(--noticia-largura) + 2 * var(--gutter)); }
.noticia__coluna > * { max-width: var(--noticia-texto); margin-inline: auto; }
.noticia__coluna > * + * { margin-top: var(--e-6); }
.noticia__coluna > .noticia__capa, .noticia__coluna > .noticia__galeria, .noticia__coluna > .conteudo-rico { max-width: none; }
.noticia__coluna > .noticia__capa--quadrada { max-width: 640px; }
.noticia__coluna > .noticia__capa--vertical { max-width: 480px; }
/* Corpo: o bloco ocupa a moldura; cada parágrafo, título, lista e citação
   volta à coluna de leitura, e o parágrafo que só traz imagem usa a moldura. */
.noticia .conteudo-rico { font-size: 1.125rem; line-height: 1.75; }
.noticia .conteudo-rico > * { max-width: var(--noticia-texto); margin-inline: auto; }
.noticia .conteudo-rico > p:has(> img) { max-width: none; }
.noticia .conteudo-rico h2 { margin-top: var(--e-7); }
.noticia .conteudo-rico blockquote { margin-block: var(--e-6); }
.noticia__capa img { max-height: 640px; object-fit: cover; background: var(--fundo-suave); }
.noticia__galeria h2 { font-size: var(--t-xl); }
.noticia__autor { display: flex; gap: var(--e-4); align-items: flex-start; padding: var(--e-5); background: var(--fundo-suave); border-radius: var(--raio-3); }
.noticia__autor p { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.noticia__autor .noticia__autor-nome { font-weight: var(--peso-forte); color: var(--floresta); }
.noticia__autor-foto { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: 50%; }
.compartilhar { padding-top: var(--e-5); border-top: 1px solid var(--borda); }
.compartilhar__titulo { margin: 0 0 var(--e-3); font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--floresta); }
.compartilhar ul { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.compartilhar a {
    display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-sm); font-weight: var(--peso-medio);
    color: var(--floresta); border: 1px solid var(--borda-forte); border-radius: 999px; text-decoration: none;
}
.compartilhar a:hover { border-color: var(--floresta); text-decoration: underline; }

/* ---------------------------------------------------------------- Formulários e contato (Fase 13) */
:root { --erro: #A12622; /* 7,2:1 sobre branco; só para estados de erro */ }
.fale-conosco__grade { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1024px) {
    .fale-conosco__grade { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
    /* Sem contato oficial na lateral, não reserva uma coluna vazia. */
    .fale-conosco__grade:not(:has(.fale-conosco__lateral)) { grid-template-columns: minmax(0, 56rem); }
}
.fale-conosco__formularios { display: grid; gap: var(--e-7); min-width: 0; }
.fale-conosco__atalhos ul { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin: 0; padding: 0; list-style: none; }
.fale-conosco__atalhos a {
    display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-2) var(--e-4); font-weight: var(--peso-medio);
    color: var(--floresta); border: 1px solid var(--borda-forte); border-radius: 999px; text-decoration: none;
}
.fale-conosco__atalhos a:hover { border-color: var(--floresta); text-decoration: underline; }
.cartao-formulario {
    padding: var(--e-5); background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-3); box-shadow: var(--sombra-1);
    scroll-margin-top: calc(var(--altura-topo) + var(--e-4));
}
@media (min-width: 720px) { .cartao-formulario { padding: var(--e-6) var(--e-7); } }
.cartao-formulario:focus { outline: none; }
.cartao-formulario h2 { margin: 0 0 var(--e-2); font-size: var(--t-2xl); }
.cartao-formulario__texto { margin: 0 0 var(--e-5); color: var(--texto-suave); }
.formulario-site__nota { margin: 0 0 var(--e-4); font-size: var(--t-xs); color: var(--texto-suave); }
.formulario-site__grade { display: grid; gap: var(--e-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
    .formulario-site__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .formulario-site__grade .campo-site--largo { grid-column: 1 / -1; }
}
.campo-site input[type="email"], .campo-site input[type="tel"], .campo-site textarea {
    width: 100%; min-height: 48px; padding: var(--e-2) var(--e-3); font: inherit; color: var(--texto);
    background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-2);
}
.campo-site textarea { min-height: 8rem; line-height: 1.5; resize: vertical; }
.campo-site textarea:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 1px; }
.campo-site__obrigatorio { font-size: var(--t-xs); font-weight: var(--peso-normal); color: var(--texto-suave); }
.campo-site--erro input, .campo-site--erro select, .campo-site--erro textarea { border: 2px solid var(--erro); }
.campo-site__erro { margin: 0; font-size: var(--t-sm); font-weight: var(--peso-medio); color: var(--erro); }
.campo-site--municipio-form { position: relative; }
.aviso-site--erro { max-width: none; margin-bottom: var(--e-5); border-left-color: var(--erro); }
.aviso-site--erro:focus { outline: var(--foco-largura) solid var(--foco); outline-offset: 2px; }
.aviso-site--erro ul { margin: var(--e-2) 0 0; padding-left: 1.25em; }
.aviso-site--erro a { color: var(--erro); font-weight: var(--peso-medio); }
.aviso-site--sucesso { max-width: none; border-left-color: var(--capim); }
.aviso-privacidade { margin: var(--e-6) 0 0; padding: var(--e-4) var(--e-5); background: var(--fundo-suave); border: 1px solid var(--borda); border-radius: var(--raio-2); }
.aviso-privacidade legend { padding: 0 var(--e-2); font-weight: var(--peso-forte); color: var(--floresta); }
.aviso-privacidade p { margin: 0 0 var(--e-3); font-size: var(--t-sm); }
.aviso-privacidade__pendente { padding: var(--e-3); color: var(--texto); background: var(--branco); border: 2px dashed var(--erro); border-radius: var(--raio-1); }
.caixa-site { display: flex; gap: var(--e-3); align-items: flex-start; }
.caixa-site input { width: 24px; height: 24px; flex-shrink: 0; margin: 2px 0 0; accent-color: var(--floresta); }
.caixa-site input:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 2px; }
.caixa-site label { font-size: var(--t-sm); font-weight: var(--peso-medio); }
.caixa-site--erro input { outline: 2px solid var(--erro); outline-offset: 1px; }
/* Armadilha para robôs: fora da tela (não display:none, que alguns robôs ignoram). */
.campo-armadilha { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.formulario-site__acoes { display: flex; flex-wrap: wrap; gap: var(--e-3) var(--e-4); align-items: center; margin-top: var(--e-5); }
.formulario-site__status { margin: 0; font-size: var(--t-sm); color: var(--texto-suave); }
.botao[aria-disabled="true"] { opacity: .75; cursor: progress; }

.contato-oficial { padding: var(--e-5); background: var(--fundo-suave); border: 1px solid var(--borda); border-radius: var(--raio-3); }
.contato-oficial h2, .contato-oficial h3 { margin: 0 0 var(--e-3); font-size: var(--t-xl); }
.contato-oficial__lista { display: grid; gap: var(--e-3); margin: 0; padding: 0; list-style: none; }
.contato-oficial__lista li { display: flex; flex-direction: column; gap: 2px; }
.contato-oficial__tipo { font-size: var(--t-xs); font-weight: var(--peso-forte); letter-spacing: .04em; text-transform: uppercase; color: var(--texto-suave); }
.contato-oficial__lista a { font-weight: var(--peso-medio); overflow-wrap: anywhere; }
.representantes__atendimento { display: grid; gap: var(--e-4); margin-top: var(--e-5); max-width: 60ch; }
.formulario-enviado .aviso-site { margin-bottom: var(--e-5); }
.formulario-enviado__texto { margin: 0 0 var(--e-4); }
.formulario-enviado__acoes { margin-top: var(--e-6); }

/* /contato: formulário à esquerda, atendimento à direita (empilha abaixo de 1024px). */
.contato__grade { display: grid; gap: var(--e-7); grid-template-columns: minmax(0, 1fr); align-items: start; }
.contato__principal, .contato__lateral { min-width: 0; }
@media (min-width: 1024px) {
    .contato__grade { grid-template-columns: minmax(0, 1.75fr) minmax(280px, 1fr); }
    .contato__grade--simples { grid-template-columns: minmax(0, 56rem); }
    .contato__lateral { position: sticky; top: calc(var(--altura-topo) + var(--e-5)); }
}
/* Página do CMS sem o bloco do formulário: os blocos vêm logo após a seção do formulário (que já tem respiro). */
.contato .blocos--apos-formulario { padding-top: 0; }
.contato-atendimento {
    display: grid; gap: var(--e-5); padding: var(--e-5); background: var(--fundo-suave);
    border: 1px solid var(--borda); border-top: 4px solid var(--floresta); border-radius: var(--raio-3);
}
@media (min-width: 720px) { .contato-atendimento { padding: var(--e-6); } }
.contato-atendimento h2 { margin: 0; font-size: var(--t-2xl); }
.contato-atendimento__bloco { display: grid; gap: var(--e-2); padding-top: var(--e-4); border-top: 1px solid var(--borda); }
.contato-atendimento__bloco h3 { margin: 0; font-size: var(--t-sm); font-weight: var(--peso-forte); letter-spacing: .04em; text-transform: uppercase; color: var(--floresta); }
.contato-atendimento__texto { margin: 0; font-style: normal; overflow-wrap: anywhere; }
.contato-atendimento__bloco p { margin: 0; }
.contato-atendimento__redes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
.contato-atendimento__redes a {
    display: inline-flex; align-items: center; min-height: 44px; padding: var(--e-2) var(--e-4); font-size: var(--t-sm); font-weight: var(--peso-medio);
    color: var(--floresta); background: var(--branco); border: 1px solid var(--borda-forte); border-radius: 999px; text-decoration: none;
}
.contato-atendimento__redes a:hover { border-color: var(--floresta); text-decoration: underline; }
.contato-atendimento__comercial .botao { margin-top: var(--e-2); }

/* WhatsApp: bolha circular no verde oficial (#25D366) com o símbolo branco
   (sprite local); o nome do canal fica no aria-label/title, sem rótulo
   visível. 56 px (alvo > 44 px), respeitando as áreas seguras. */
.whatsapp-flutuante {
    position: fixed; z-index: 40; right: max(var(--e-4), env(safe-area-inset-right)); bottom: max(var(--e-4), env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0;
    color: var(--branco); background: #25D366; border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .28); text-decoration: none;
    transition: transform var(--duracao) var(--curva), box-shadow var(--duracao) var(--curva);
}
.whatsapp-flutuante:hover { color: var(--branco); transform: scale(1.06); box-shadow: 0 6px 18px rgba(0, 0, 0, .32); }
/* Anel duplo: visível sobre fundo claro e escuro (rodapé Floresta). */
.whatsapp-flutuante:focus-visible { outline: 3px solid var(--floresta-profunda); outline-offset: 2px; box-shadow: 0 0 0 7px var(--soja); }
.whatsapp-flutuante .icone-site { width: 32px; height: 32px; fill: currentColor; stroke: none; }
@media (prefers-reduced-motion: reduce) { .whatsapp-flutuante { transition: none; } .whatsapp-flutuante:hover { transform: none; } }
/* Com o botão, o fim do rodapé não fica escondido atrás dele. */
body:has(.whatsapp-flutuante) .rodape__base { padding-bottom: 80px; }

/* Voltar ao topo: discreto, canto inferior direito (acima do WhatsApp, quando
   houver); some com o aviso de cookies aberto. Nasce oculto (site.js). */
.voltar-topo {
    position: fixed; z-index: 40; right: max(var(--e-4), env(safe-area-inset-right)); bottom: max(var(--e-4), env(safe-area-inset-bottom));
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
    color: var(--branco); background: var(--floresta); border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%;
    box-shadow: var(--sombra-2); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity 220ms var(--curva), transform 220ms var(--curva), visibility 0s linear 220ms;
}
.voltar-topo--visivel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.voltar-topo:hover { background: var(--floresta-profunda); }
.voltar-topo:focus-visible { outline: var(--foco-largura) solid var(--soja); outline-offset: 2px; }
.voltar-topo__seta { width: 11px; height: 11px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: translateY(3px) rotate(45deg); }
/* Empilhado acima da bolha do WhatsApp (56 px + 12 px de folga), centrado no mesmo eixo. */
body:has(.whatsapp-flutuante) .voltar-topo {
    right: calc(max(var(--e-4), env(safe-area-inset-right)) + 6px); bottom: calc(max(var(--e-4), env(safe-area-inset-bottom)) + 68px);
}
/* Aviso de cookies aberto (fixo na base): os botões flutuantes saem de cena até a escolha. */
body.com-aviso-cookies .voltar-topo, body.com-aviso-cookies .whatsapp-flutuante { display: none; }
@media (prefers-reduced-motion: reduce) { .voltar-topo { transform: none; transition: none; } }

/* ---------------------------------------------------------------- Indicadores e cookies (Fase 14) */
/* Faixa utilitária acima do cabeçalho (só na Home). Mesma estrutura com e sem
   dado: o JavaScript troca só o texto, sem deslocar o layout. */
.indicadores { background: var(--fundo-suave); border-bottom: 1px solid var(--borda); font-size: var(--t-xs); line-height: 1.45; color: var(--texto); }
.indicadores__lista { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--e-2) var(--e-6); padding-block: var(--e-2); }
/* Altura de três linhas reservada (rótulo/valor, detalhe, fonte) em qualquer estado. */
.indicador { min-width: 0; flex: 1 1 240px; min-height: 3.9rem; }
@media (max-width: 479px) { .indicador { min-height: 5rem; } }
.indicador p { margin: 0; }
.indicador__rotulo { font-weight: var(--peso-medio); }
.indicador__valor { font-size: var(--t-sm); font-weight: var(--peso-forte); color: var(--floresta); white-space: nowrap; }
.indicador__detalhe, .indicador__meta { color: var(--texto-suave); }
.indicador--desatualizado .indicador__meta { color: var(--texto); font-weight: var(--peso-medio); }
.indicador--indisponivel .indicador__valor { font-size: var(--t-xs); font-weight: var(--peso-medio); color: var(--texto-suave); white-space: normal; }
.indicador[aria-busy="true"] .indicador__valor { color: var(--texto-suave); }
.indicadores__cidade { display: flex; align-items: center; gap: var(--e-2); flex: 0 1 auto; }
.indicadores__cidade label { font-weight: var(--peso-medio); }
.indicadores__cidade select {
    min-height: 36px; max-width: 14rem; padding: 2px var(--e-2); font: inherit; color: var(--texto);
    background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-1);
}
.indicadores__cidade select:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 1px; }

/* Aviso de cookies: não bloqueia a página (sem tela escura), fixo na base;
   aceitar, rejeitar e personalizar com o mesmo peso visual. */
.aviso-cookies {
    position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
    padding: var(--e-3) max(var(--e-4), env(safe-area-inset-right)) max(var(--e-3), env(safe-area-inset-bottom)) max(var(--e-4), env(safe-area-inset-left));
}
.aviso-cookies__caixa {
    max-width: 960px; max-height: 70vh; overflow-y: auto; margin: 0 auto; padding: var(--e-4) var(--e-5);
    background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-3); box-shadow: var(--sombra-2);
}
.aviso-cookies__titulo { margin: 0 0 var(--e-2); font-size: var(--t-lg); }
.aviso-cookies__texto { margin: 0 0 var(--e-2); font-size: var(--t-sm); }
.aviso-cookies__pendente { margin: 0 0 var(--e-3); padding: var(--e-2) var(--e-3); font-size: var(--t-sm); background: var(--fundo-suave); border: 2px dashed var(--erro); border-radius: var(--raio-1); }
.aviso-cookies__acoes, .preferencias-cookies__acoes { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-3); margin-top: var(--e-3); }
/* Celular: banner baixo — aceitar e rejeitar lado a lado (mesmo peso), preferências abaixo. */
@media (max-width: 479px) {
    .aviso-cookies { padding-inline: var(--e-2); padding-bottom: max(var(--e-2), env(safe-area-inset-bottom)); }
    .aviso-cookies__caixa { padding: var(--e-3) var(--e-4); }
    .aviso-cookies__titulo { font-size: var(--t-base); }
    .aviso-cookies__texto, .aviso-cookies__pendente { font-size: var(--t-xs); line-height: 1.5; }
    .aviso-cookies__acoes { gap: var(--e-2); }
    .aviso-cookies__acoes .botao { flex: 1 1 calc(50% - var(--e-2)); min-height: 44px; padding-inline: var(--e-2); }
    .aviso-cookies__acoes .botao:last-child { flex-basis: 100%; }
}
/* Com o aviso aberto, o fim da página não fica escondido atrás dele. */
body.com-aviso-cookies .rodape__base { padding-bottom: 50vh; }

.preferencias-cookies {
    width: min(640px, calc(100vw - 2 * var(--e-4))); max-height: calc(100vh - 2 * var(--e-4)); padding: var(--e-5);
    color: var(--texto); background: var(--branco); border: 1px solid var(--borda-forte); border-radius: var(--raio-3); box-shadow: var(--sombra-2);
}
.preferencias-cookies::backdrop { background: rgba(22, 26, 22, .55); }
.preferencias-cookies h2 { font-size: var(--t-xl); }
.preferencias-cookies p { font-size: var(--t-sm); }
.preferencias-cookies__categorias { margin: var(--e-4) 0; padding: 0; border: 0; }
.preferencias-cookies__categorias legend { margin-bottom: var(--e-2); padding: 0; font-weight: var(--peso-forte); color: var(--floresta); }
.preferencias-cookies__categoria { padding: var(--e-3) 0; border-top: 1px solid var(--borda); }
.preferencias-cookies__categoria p { margin: var(--e-2) 0 0 calc(24px + var(--e-3)); color: var(--texto-suave); }
.preferencias-cookies__sinal { margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3); background: var(--fundo-suave); border-left: 4px solid var(--capim); }
.caixa-site input:disabled { accent-color: var(--texto-suave); }
.botao--discreto { background: transparent; color: var(--floresta); border-color: transparent; text-decoration: underline; }
.botao--discreto:hover { color: var(--floresta-profunda); text-decoration-thickness: 2px; }
.rodape__cookies {
    min-height: 44px; padding: 0; font: inherit; color: var(--sobre-escuro); background: none; border: 0;
    text-decoration: underline; text-underline-offset: .18em; cursor: pointer;
}
.rodape__cookies:hover { color: var(--soja); }
.rodape a.rodape__cookies { display: inline-flex; align-items: center; text-decoration: underline; }

/* Modais de cookies (informativo e preferências): centralizados; no celular,
   folha inferior. Página de fundo inerte (showModal) e sem rolagem. */
html:has(dialog.preferencias-cookies[open]) { overflow: hidden; }
.preferencias-cookies__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); margin-bottom: var(--e-2); }
.preferencias-cookies__topo h2 { margin: 0; }
/* Título recebe o foco inicial só para o leitor de tela anunciar o modal (não é interativo: sem contorno). */
.preferencias-cookies__topo h2:focus { outline: none; }
.preferencias-cookies__fechar {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; margin: -8px -8px 0 0;
    font-size: 1.75rem; line-height: 1; color: var(--texto); background: none; border: 0; border-radius: var(--raio-2); cursor: pointer;
}
.preferencias-cookies__fechar:hover { background: var(--fundo-suave); }
.preferencias-cookies__fechar:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: 0; }
.preferencias-cookies__estados { margin: var(--e-4) 0; padding: 0; list-style: none; }
.preferencias-cookies__estados li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-1) var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--borda); }
.preferencias-cookies__estados p { flex-basis: 100%; margin: 0; color: var(--texto-suave); }
.preferencias-cookies__nome { font-weight: var(--peso-forte); color: var(--floresta); }
.preferencias-cookies__estado { padding: 0 var(--e-2); font-size: var(--t-xs); font-weight: var(--peso-forte); color: var(--texto-suave); background: var(--fundo-suave); border: 1px solid var(--borda-forte); border-radius: var(--raio-total); }
.preferencias-cookies__estado--ativo { color: var(--floresta); border-color: var(--capim); }
@media (max-width: 599px) {
    .preferencias-cookies {
        width: 100%; max-width: none; max-height: 88vh; margin: auto 0 0; padding: var(--e-5) var(--e-4) max(var(--e-5), env(safe-area-inset-bottom));
        border-radius: var(--raio-3) var(--raio-3) 0 0; border-bottom: 0;
    }
    .preferencias-cookies__acoes .botao { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: no-preference) {
    .preferencias-cookies[open] { animation: entrar 220ms var(--curva-saida) both; }
    .preferencias-cookies[open]::backdrop { animation: aparecer 220ms var(--curva) both; }
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.rodape__cookies:focus-visible { outline: var(--foco-largura) solid var(--soja); outline-offset: 2px; }

/* ---------------------------------------------------------------- Movimento de entrada
   Tudo nasce visível. As entradas do hero e do cabeçalho de página são só CSS
   (terminam sempre no estado final). A revelação na rolagem depende de
   html.movimento, que js/movimento.js só põe com IntersectionObserver e sem
   movimento reduzido, e apenas em elementos que ainda estão abaixo da dobra.
   Sem JavaScript, nada fica escondido. */
@keyframes entrar { from { opacity: 0; transform: translate3d(0, var(--revelar-distancia), 0); } }
/* Sem opacidade: o título pode ser o elemento LCP da página. */
@keyframes subir { from { transform: translate3d(0, 12px, 0); } }
@keyframes hero-imagem { from { transform: scale(1.05); } }
@keyframes icone-entrar { from { opacity: 0; transform: scale(.82); } }
@keyframes ponto-pulso { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.2); } 100% { transform: scale(1); } }

/* Barra de diferenciais: entra logo depois do hero (ou sozinha, sem hero). */
.destaques { --destaques-inicio: 0ms; }
.hero + .destaques { --destaques-inicio: 420ms; }
.destaques__lista > li:nth-child(2) { --d: 110ms; }
.destaques__lista > li:nth-child(3) { --d: 220ms; }
.destaques__lista > li:nth-child(4) { --d: 330ms; }
.destaques__lista > li:nth-child(5) { --d: 440ms; }
.destaques__lista > li:nth-child(n+6) { --d: 550ms; }

@media (prefers-reduced-motion: no-preference) {
    /* Hero: imagem assenta devagar; texto em sequência. Os botões são clicáveis desde o início. */
    .hero__imagem img { animation: hero-imagem 2.4s var(--curva-saida) both; }
    .hero__conteudo > .sobretitulo, .hero__texto, .hero__conteudo > .grupo-botoes { animation: entrar var(--revelar-duracao) var(--curva-saida) both; }
    .hero h1 { animation: subir 950ms var(--curva-saida) 80ms both; }
    .hero__texto { animation-delay: 200ms; }
    .hero__conteudo > .grupo-botoes { animation-delay: 310ms; }

    /* Diferenciais: item a item, ícone e depois texto. Só o conteúdo se move (o
       contêiner, os filetes e a sobreposição ao hero ficam parados: sem CLS). */
    .destaques__lista > li > .destaques__icone { animation: icone-entrar var(--revelar-duracao) var(--curva-saida) both; animation-delay: calc(var(--destaques-inicio) + var(--d, 0ms)); }
    .destaques__lista > li > .destaques__texto { animation: entrar var(--revelar-duracao) var(--curva-saida) both; animation-delay: calc(var(--destaques-inicio) + var(--d, 0ms) + 120ms); }
    /* Abaixo da dobra, js/movimento.js segura a entrada até a barra aparecer. */
    .movimento .destaques--aguardando .destaques__lista > li > * { animation-play-state: paused; }

    .cabecalho-pagina .container > :not(h1) { animation: entrar var(--revelar-duracao) var(--curva-saida) 140ms both; }
    .cabecalho-pagina h1 { animation: subir 950ms var(--curva-saida) both; }
}

/* Revelação na rolagem (só com html.movimento; js/movimento.js). */
.movimento .revelar {
    transition: opacity var(--revelar-duracao) var(--curva-saida), transform var(--revelar-duracao) var(--curva-saida);
    transition-delay: var(--atraso, 0ms);
}
.movimento .revelar:not(.revelado) { opacity: 0; transform: translate3d(0, var(--revelar-distancia), 0); }

/* Sequência: o bloco fica parado e os filhos entram um a um (sobretítulo,
   título, texto, botão). --i é a posição de cada filho (js/movimento.js). */
.movimento .revelar--sequencia, .movimento .revelar--sequencia:not(.revelado) { opacity: 1; transform: none; transition: none; }
.movimento .revelar--sequencia > * {
    transition: opacity var(--revelar-duracao) var(--curva-saida), transform var(--revelar-duracao) var(--curva-saida);
    transition-delay: calc(var(--atraso, 0ms) + var(--i, 0) * var(--revelar-passo));
}
.movimento .revelar--sequencia:not(.revelado) > * { opacity: 0; transform: translate3d(0, var(--revelar-distancia), 0); }

/* Imagem: aparece e "assenta" (escala mínima, recortada pelo próprio quadro). */
.movimento .revelar--imagem:not(.revelado) { transform: none; }
.movimento .revelar--imagem img { transition: transform 1.6s var(--curva-saida); transition-delay: var(--atraso, 0ms); }
.movimento .revelar--imagem:not(.revelado) img { transform: scale(1.05); }

/* Ícones de listas (pilares): leve ampliação junto com o item. */
.movimento .pilares > li.revelar .icone-site { transition: opacity var(--revelar-duracao) var(--curva-saida), transform var(--revelar-duracao) var(--curva-saida); transition-delay: calc(var(--atraso, 0ms) + 80ms); }
.movimento .pilares > li.revelar:not(.revelado) .icone-site { opacity: 0; transform: scale(.82); }

.movimento .revelar--imediato, .movimento .revelar--imediato > *, .movimento .revelar--imediato img, .movimento .pilares > li.revelar--imediato .icone-site { transition: none; }

/* Presença: as UFs atendidas acendem em sequência e os pontos pulsam uma vez.
   O estado final é o mesmo de sempre (integral × parcial preservados). */
.movimento .presenca__mapa--animar .mapa-estatico__uf { transition: fill 700ms var(--curva), stroke 700ms var(--curva); transition-delay: var(--atraso-uf, 0ms); }
.movimento .presenca__mapa--animar:not(.presenca__mapa--revelado) .mapa-estatico__uf { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .35); }
.movimento .presenca__mapa--animar:not(.presenca__mapa--revelado) .mapa-estatico__ponto,
.movimento .presenca__mapa--animar:not(.presenca__mapa--revelado) .presenca__mapa-arte span { opacity: 0; }
.movimento .presenca__mapa--revelado .mapa-estatico__ponto,
.movimento .presenca__mapa--revelado .presenca__mapa-arte span { transform-box: fill-box; transform-origin: center; animation: ponto-pulso 1.1s var(--curva-saida) var(--atraso-ponto, 0ms) 1 both; }

/* Contagem: algarismos de largura fixa enquanto conta (sem deslocar o texto). */
.contador { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- Movimento reduzido */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    /* Sem deslocamentos de microinteração (zoom e elevação do cartão, seta e clique do botão). */
    .botao:hover .icone-site, .botao:active, .cartao__imagem img, .cartao--produto:hover, .cartao--produto:focus-within, a.logo-instituicao:hover { transform: none !important; }
}

/* ---------------------------------------------------------------- Impressão */
@media print {
    .topo, .rodape, .pular-conteudo, .menu-movel, .aviso-previa, .whatsapp-flutuante, .voltar-topo, .aviso-cookies, .preferencias-cookies, .indicadores, .instituicoes-faixa__controles { display: none !important; }
    .instituicoes-faixa__trilho { overflow: visible; }
    .instituicoes-faixa__lista { flex-wrap: wrap; }
    .hero, .secao--escura, .destaques__lista, .presenca { color: #000; background: none; }
    .hero__imagem, .presenca__fundo { display: none; }
    .movimento .revelar, .movimento .revelar *, .movimento .presenca__mapa--animar * { opacity: 1 !important; transform: none !important; }
    .destaques__lista > li > * { animation: none !important; }
    a { color: #000; }
}

/* Imagens inseridas no corpo das notícias, com dimensões da biblioteca: até a
   largura da moldura (sem ampliar as pequenas) e no máximo 80% da altura da
   tela; "contain" mantém a proporção inteira (sem corte) e a caixa reservada
   pelos atributos evita CLS. */
.noticia .conteudo-rico img { display: block; max-width: 100%; height: auto; max-height: min(80vh, 760px); margin: var(--e-6) auto; object-fit: contain; }