/**
 * com_anuariocoop :: view "Ramos" — página completa (design Sistema OCB).
 * Portado de docs/ramos-html. Tudo escopado em .ac-ramos-page. As cores do
 * ramo entram por --ramo / --ramo-2 / --ramo-esc (definidas inline no PHP).
 * Fonte Intro via fallback (carrega se os arquivos forem adicionados em fonts/).
 *
 * @copyright (C) 2026 OCB / SESCOOP
 * @license   GNU General Public License version 3 or later; see LICENSE.txt
 */

/* Evita a barra de rolagem horizontal causada pelo full-bleed (100vw inclui a
   largura da barra vertical). "clip" não cria contexto de rolagem, então não
   quebra a subnav sticky. Só afeta páginas de ramo (onde este CSS é carregado). */
body { overflow-x: clip; }

.ac-ramos-page {
    /* ---- Tipografia (Intro com fallback até os arquivos serem fornecidos) ---- */
    --font-display: var(--font-intro-light);
    --font-display-alt: var(--font-intro-regular-alt);
    --font-body: var(--font-inter);

    /* ---- Âncora institucional ---- */
    --azul-marinho: var(--ocb-azul-marinho);
    --azul-marinho-ink: #0f1448;
    --sescoop-verde: var(--ocb-verde-sescoop);

    /* ---- Neutros ---- */
    --ink-2: var(--ocb-azul-marinho);
    --ink-3: #4a4f7a;
    --ink-4: #8b8fae;
    --bg-2: var(--color-bg-site);
    --bg-3: #ecedf5;
    --line: #e3e5ef;

    /* ---- Cor do ramo (fallback; sobrescrito inline) ---- */
    --ramo: var(--ocb-azul-marinho);
    --ramo-2: var(--ocb-azul-ceu);
    --ramo-esc: #0f1448;

    /* Variáveis do shell comum (.ac-shell-view, ver anuario-shell.css) que o
       submenu compartilhado (default_submenu.php → .ac-shell-container /
       .ac-shell-submenu) precisa para centralizar e ficar sticky também na
       página de ramos, que usa outro wrapper. Mesmos valores de .ac-shell-view. */
    --ac-shell-max-width: 1320px;
    --ac-template-header-height: 70px;
    --ac-shell-submenu-height: 84px;

    /* Tons de apoio derivados da paleta do ramo (tint de fundo e linha/borda).
       Fallback fixo primeiro; color-mix quando suportado. */
    --ramo-tint: #f1f2f9;
    --ramo-tint: color-mix(in srgb, var(--ramo-2) 30%, var(--ocb-branco));
    --ramo-line: #dfe2f0;
    --ramo-line: color-mix(in srgb, var(--ramo-2) 55%, var(--ocb-branco));

    font-family: var(--font-body);
    color: var(--ink-2);
    background: var(--ocb-branco);
    line-height: 1.5;

    /* Full-bleed: as faixas (fundos das sections) ocupam a largura da tela de
       ponta a ponta, mesmo dentro da coluna do template. O conteúdo segue
       centralizado e limitado pelos wraps internos (.acr-wrap / .acr-hero__inner).
       Requer coluna do template centralizada (layout sem sidebar). A barra de
       rolagem horizontal do 100vw é contida pelo overflow-x:clip (anuario-shell.css). */
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.ac-ramos-page *,
.ac-ramos-page *::before,
.ac-ramos-page *::after {
    box-sizing: border-box;
}

.ac-ramos-page img {
    max-width: 100%;
}

.t-eyebrow {
    font-family: var(--font-display-alt);
    font-weight: 400;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

/* ============================ Ticker ============================ */
.acr-ticker {
    background: var(--azul-marinho);
    color: color-mix(in srgb, var(--ocb-branco) 92%, var(--ocb-transparent));
    height: 28px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.acr-ticker__track {
    display: flex;
    gap: 60px;
    white-space: nowrap;
    font-size: 11px;
    letter-spacing: .06em;
    animation: acr-tick 30s linear infinite;
}

@keyframes acr-tick {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================ Topbar ============================ */
.acr-topbar {
    background: var(--ocb-branco);
    border-bottom: 1px solid var(--line);
}

.acr-topbar__inner {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 32px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 16px 32px;
}

.acr-topbar__brand img { display: block; height: 38px; }

.site-nav-links { display: flex; gap: 34px; }

.site-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 500;
    font-size: 14px;
    color: var(--ink-3);
    text-decoration: none;
    transition: color .18s;
}

.site-link:hover { color: var(--azul-marinho); }

.acr-topbar__actions { display: flex; align-items: center; gap: 14px; }

.somos-badge {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--sescoop-verde);
    color: var(--ocb-branco);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 11px;
    line-height: 1.05;
}

.acr-iconbtn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid var(--azul-marinho);
    background: var(--ocb-branco);
    color: var(--azul-marinho);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--ocb-branco);
    color: var(--azul-marinho);
    cursor: pointer;
    font-size: 22px;
}

/* ============================ Mobile menu ============================ */
.mobile-menu {
    display: none;
    flex-direction: column;
    gap: 2px;
    padding: 10px 24px 18px;
    border-bottom: 1px solid var(--line);
    background: var(--ocb-branco);
}

.ac-ramos-page[data-menu="true"] .mobile-menu { display: flex; }

.mobile-menu__eyebrow {
    font-family: var(--font-display-alt);
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-4);
    padding: 12px 4px 4px;
}

.mobile-menu a {
    padding: 11px 4px;
    font-weight: 500;
    color: var(--ink-3);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.mobile-menu a.is-current { font-weight: 600; color: var(--ink-2); }
.mobile-menu a:last-child { border-bottom: none; }

/* ============================ Hero ============================ */
.acr-hero {
    position: relative;
    overflow: hidden;
    color: var(--ocb-branco);
    min-height: 120px;
    display: flex;
    align-items: center;
    padding: 18px 32px;
    background: linear-gradient(100deg, #5883d0 0%, var(--ramo) 100%);
}

/* Degradê fixo por ramo (aprovado no design) — mais preciso que a fórmula
   genérica acima para os ramos com uma segunda cor destoante da paleta. */
.acr-hero[data-ramo="agropecuario"]   { background: linear-gradient(100deg, #5883d0 0%, #3F9256 100%); }
.acr-hero[data-ramo="consumo"]        { background: linear-gradient(100deg, #5883d0 0%, #4AA7B2 100%); }
.acr-hero[data-ramo="credito"]        { background: linear-gradient(100deg, #5883d0 0%, #A0AAD6 100%); }
.acr-hero[data-ramo="infraestrutura"] { background: linear-gradient(100deg, #5883d0 0%, #DDA136 100%); }
.acr-hero[data-ramo="saude"]          { background: linear-gradient(100deg, #5883d0 0%, #B85256 100%); }
.acr-hero[data-ramo="tpbs"]           { background: linear-gradient(100deg, #5883d0 0%, #8D1F72 100%); }
.acr-hero[data-ramo="transporte"]     { background: linear-gradient(100deg, #5883d0 0%, #6F808D 100%); }
.acr-hero[data-ramo="seguros"]        { background: linear-gradient(100deg, #5883d0 0%, #438FA7 100%); }

.acr-hero__art {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: 50% 15%;
    opacity: .30;
    pointer-events: none;
}

@media (max-width: 1200px) {
    .acr-hero__art {
        background-size: 100%;
        background-position: 0% 100%;
    }
}

.acr-hero__inner {
    width: 1240px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .acr-hero__inner {
        width: 100%;
    }
}

.acr-hero__icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 30px;
}

.acr-hero__icon img { width: 60px; height: 60px; object-fit: contain; }
.acr-hero__eyebrow { color: var(--ocb-branco); opacity: .82; margin-bottom: 12px; }

.acr-hero__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 40px;
    line-height: 1.05;
    letter-spacing: -.01em;
    margin: 0;
}

/* ============================ Sub-nav ============================ */
.acr-subnav {
    position: sticky;
    top: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--ocb-branco) 94%, var(--ocb-transparent));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
}

.acr-subnav__inner {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1320px;
    margin: 0 auto;
    padding: 12px 32px;
}

.acr-subnav__brand img { display: block; height: 44px; }

.subnav-links { display: flex; align-items: center; gap: 24px; }

.subnav-link {
    position: relative;
    font-weight: 500;
    font-size: 13.5px;
    color: var(--ink-3);
    text-decoration: none;
}

.subnav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -7px;
    height: 2px;
    background: linear-gradient(90deg, var(--ramo), var(--ramo-2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.subnav-link:hover::after,
.subnav-link[aria-current="page"]::after { transform: scaleX(1); }
.subnav-link[aria-current="page"] { color: var(--ink-2); font-weight: 600; }

.subnav-search {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-2);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--ink-4);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 12.5px;
}

/* ============================ Seções / grids ============================ */
.acr-section { padding: 25px 0px 40px 0px; background: var(--ocb-branco); }
.acr-section--alt { background: var(--bg-2); }
.acr-wrap { max-width: 1180px; margin: 0 auto; }
.acr-head { max-width: 1180px; margin-bottom: 30px; }
.acr-head__eyebrow { color: var(--ramo-esc); margin-bottom: 16px; }

.acr-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 36px;
    line-height: 1.12;
    color: var(--ink-2);
    margin: 0;
}

.acr-lede { font-size: 16px; line-height: 1.6; color: var(--ink-3); margin: 12px 0 0; font-family: var(--font-inter); }

/* Enquadra a apresentação na mesma régua das demais seções (.acr-wrap = 1180px,
   borda esquerda alinhada aos cards) e mantém o texto numa medida de leitura,
   alinhado à esquerda — antes ficava centralizado a 980px, fora da régua. */
.acr-intro__inner { max-width: 1180px; margin: 0 auto; }
.acr-intro__lead { font-size: 19px; line-height: 1.66; color: var(--ink-2); margin: 0; font-family: var(--font-inter); max-width: 1180px; }

/* ---- Cards ---- */
.card { background: var(--ocb-branco); border: 1px solid var(--line); border-radius: 16px; }
.kpi-card { padding: 26px 26px 22px; transition: box-shadow .2s, transform .2s; }
.kpi-card:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--ocb-azul-marinho) 9%, var(--ocb-transparent)); transform: translateY(-2px); }

.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.fin-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin-bottom: 22px; }

.acr-kpi__icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--ramo) 12%, var(--ocb-branco));
    color: var(--ramo-esc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    font-size: 22px;
}

.acr-kpi__value { font-family: var(--font-display); font-weight: 300; font-size: 46px; line-height: 1; color: var(--ink-2); }
.acr-fin-card .acr-kpi__value,
.fin-kpis .acr-kpi__value { font-size: 40px; }
.acr-unit { font-size: 20px; color: var(--ink-3); }
.acr-kpi__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.acr-kpi__label { font-weight: 600; font-size: 15px; color: var(--ink-3); }
.card > .acr-kpi__label { margin-top: 10px; }

/* Cards da GD (Infraestrutura): título EM CIMA, número embaixo (sem ícone). */
.acr-gd-cards .card .acr-kpi__label { margin: 0 0 8px; }

.acr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: 11px;
    color: #2e7d52;
    background: #e7f3ec;
    border-radius: 999px;
    padding: 2px 8px;
}

.acr-chip.is-down { color: #c0392b; background: #fdecea; }

/* ---- Mapa ---- */
.acr-map-card { padding: 24px 26px; }

.seg { display: inline-flex; background: var(--bg-3); border-radius: 999px; padding: 4px; gap: 2px; }
.seg button { border: none; background: transparent; color: var(--ink-3); font-family: var(--font-body); font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: background-color .16s, color .16s; }
.seg button[data-on="1"] { background: var(--ocb-branco); color: var(--azul-marinho); box-shadow: 0 1px 3px color-mix(in srgb, var(--ocb-azul-marinho) 12%, var(--ocb-transparent)); }
/* Card de estado (6 métricas empilhadas: rótulo pequeno em cima, valor grande
   embaixo — como o design). Separador sutil entre cada métrica. */
.acr-state-card--full .acr-state-card__metrics { gap: 0; }
.acr-state-card--full .acr-state-card__metrics li {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 11px 0;
    border-top: 1px solid color-mix(in srgb, var(--ocb-branco) 22%, var(--ocb-transparent));
    font-size: 12px;
    color: color-mix(in srgb, var(--ocb-branco) 78%, var(--ocb-transparent));
}
.acr-state-card--full .acr-state-card__metrics li:first-child { border-top: none; }
.acr-state-card--full .acr-state-card__metrics li span {
    margin-left: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 27px;
    line-height: 1.05;
    color: #fff;
}

/* Box de informações até a metade da largura do mapa. */
.panorama-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 34px; align-items: stretch; }
/* min-width:0 deixa a coluna do mapa encolher (senão o 1fr trava no min-content
   do canvas do ECharts e estoura a largura no mobile); overflow:hidden contém o
   tooltip absoluto do ECharts para não gerar scroll horizontal na página. */
.acr-map-box { position: relative; min-width: 0; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.acr-chart { width: 100%; min-width: 0; }
/* Container quadrado: o mapa (bounding box ~1:1) fica limitado pela largura da
   coluna, preenchendo a caixa como o SVG width:100% do design (não sobra cinza).
   O layoutSize do ECharts (ramos-charts.js) faz o ajuste fino de preenchimento. */
.acr-chart[data-chart-type="map"] { height: auto; aspect-ratio: 1 / 1; min-height: 340px; }
.acr-chart--fin { height: 330px; }
.acr-chart--seg { height: 320px; }
.acr-map-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.acr-state-card {
    /* Degradê do ramo saturado: tom escuro (--ramo-esc) → cor forte (--ramo),
       como o card do design — texto branco legível sobre fundo mais escuro. */
    background: linear-gradient(135deg, var(--ramo-esc), var(--ramo));
    border-radius: 16px;
    padding: 28px;
    color: var(--ocb-branco);
}

.acr-state-card__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.acr-state-card__name { font-family: var(--font-display); font-weight: 300; font-size: 32px; line-height: 1.05; }
.acr-state-card__year { font-weight: 700; font-size: 14px; background: rgba(0, 0, 0, .16); border-radius: 999px; padding: 4px 12px; }
.acr-state-card__region { font-size: 14px; color: color-mix(in srgb, var(--ocb-branco) 85%, var(--ocb-transparent)); margin-top: 4px; }
.acr-state-card__metrics { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.acr-state-card__metrics li { display: flex; align-items: baseline; gap: 8px; font-size: 15px; color: color-mix(in srgb, var(--ocb-branco) 90%, var(--ocb-transparent)); }
.acr-state-card__metrics span { font-family: var(--font-display); font-weight: 300; font-size: 26px; color: var(--ocb-branco); }
.acr-state-card__hint { font-size: 13px; color: color-mix(in srgb, var(--ocb-branco) 80%, var(--ocb-transparent)); margin-top: 14px; }

.acr-legend { background: var(--ocb-branco); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.acr-legend__title { font-weight: 700; font-size: 12px; color: var(--ink-2); margin-bottom: 12px; }
.acr-legend__scale { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ink-4); }
.acr-legend__bar { height: 12px; flex: 1; border-radius: 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--ramo) 12%, var(--ocb-branco)), var(--ramo-2), var(--ramo), var(--ramo-esc)); }

/* ---- Financeiro ---- */
.acr-fin-card { padding: 24px 28px; }
.acr-fin-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.acr-fin-card__title { font-weight: 700; font-size: 15px; color: var(--ink-2); }
.acr-fin-card__sub { font-size: 12px; color: var(--ink-4); }
.acr-fintabs { display: flex; gap: 8px; flex-wrap: wrap; }

/* Comparativo dinâmico acima do gráfico (indicador · valor · variação vs ano anterior) */
.acr-fin-cmp { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 8px 0 10px; padding: 0 2px; }
.acr-fin-cmp__title { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.acr-fin-cmp__val { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; color: var(--ramo-esc); }

.fintab {
    border: 1px solid var(--line);
    background: var(--ocb-branco);
    color: var(--ink-3);
    border-radius: 999px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all .16s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.fintab:hover { border-color: var(--ramo); color: var(--ramo-esc); }
.fintab[data-on="1"] { background: var(--ramo-esc); color: var(--ocb-branco); border-color: var(--ramo-esc); }

/* ---- Segmentos ---- */
.acr-seg-card { padding: 30px 32px; }
.acr-seg-card__title { font-weight: 700; font-size: 15px; color: var(--ink-2); margin-bottom: 14px; }

/* Barras horizontais em HTML/CSS (mesmo modelo de /visao-geral?view=cooperativas
   "Tempo de atuação das cooperativas"), com as cores do ramo. */
.acr-seg-bars {
    list-style: none;
    display: grid;
    gap: 13px;
    margin: 4px 0 0;
    padding: 0;
}

.acr-seg-bars__row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr) 54px;
    gap: 14px;
    align-items: center;
}

.acr-seg-bars__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-2);
    text-align: right;
}

.acr-seg-bars__bar {
    height: 22px;
    overflow: hidden;
    border-radius: 5px;
    background: var(--bg-3);
}

.acr-seg-bars__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    /* Gradiente da barra: do tom mais claro (--ramo-2) ao mais escuro (--ramo-esc). */
    background: linear-gradient(90deg, var(--ramo-2), var(--ramo-esc));
}

.acr-seg-bars__pct {
    font-size: 13px;
    font-weight: 800;
    color: var(--ink-2);
    text-align: right;
}

/* Variante com valor absoluto (nº formatado) no lugar do percentual — usada nos
   "Dados complementares" (ex.: frota do Transporte). Colunas mais compactas para
   caber nos cards menores; a 3ª coluna acomoda o número (ex.: 18.077). */
.acr-seg-bars--num .acr-seg-bars__row {
    grid-template-columns: minmax(84px, 1.1fr) minmax(0, 2fr) auto;
    gap: 12px;
}
.acr-seg-bars--num .acr-seg-bars__pct {
    min-width: 52px;
}

/* Variante para rótulos curtos (ex.: substâncias minerais do TPBS): rótulos à
   esquerda e a coluna do rótulo com a largura do MAIOR nome (--seg-label-w,
   calculada no template). Uniforme entre as linhas — as barras começam todas no
   mesmo ponto (sem "escada"), sem o vazio da coluna fixa de 220px. */
.acr-seg-bars--auto .acr-seg-bars__row {
    grid-template-columns: var(--seg-label-w, 120px) minmax(0, 1fr) 54px;
}
.acr-seg-bars--auto .acr-seg-bars__label {
    text-align: left;
}

/* Variante com barras alinhadas à esquerda: coluna do rótulo estreita (ex.: anos
   da evolução da GD). O rótulo continua encostado à direita (junto da barra); só
   as barras deslocam para a esquerda, começando logo após o rótulo curto. */
.acr-seg-bars--left .acr-seg-bars__row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
}

/* Cards de categorias regulatórias (ex.: Ramo Crédito) */
.acr-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 20px; }
.acr-cat { padding: 26px 28px; }
.acr-cat .acr-kpi__icon { margin-bottom: 12px; }
.acr-cat__name { font-family: var(--font-intro-semibold); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--ramo-esc); margin-bottom: 6px; }
.acr-cat__txt { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }

.acr-empty { color: var(--ink-4); font-style: italic; padding: 24px 0; }

/* ---- Faixas (CTA) ---- */
/* Mesmo estilo dos cards de KPI: só borda e informações, sem banner/degradê
   nem arte decorativa (ver .acr-society, mesmo tratamento). */
.acr-band {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--ocb-branco);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px 44px;
    color: var(--ink-2);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}

.acr-band__text h3 { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.12; color: var(--ink-2); margin: 0 0 8px; }
.acr-band__text p { font-size: 15px; line-height: 1.55; color: var(--ink-3); margin: 0; max-width: 60ch; }
.acr-band__action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.acr-band__info { font-size: 11.5px; color: var(--ink-4); }

.btn-navy { background: var(--azul-marinho); color: var(--ocb-branco); }
.btn-navy:hover { background: var(--ramo-esc); }

.btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border-radius: 999px;
    padding: 15px 30px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .22s, color .22s, transform .22s;
}

.btn-white { background: var(--ocb-branco); color: var(--azul-marinho); }
.btn-white:hover { background: color-mix(in srgb, var(--ocb-branco) 88%, var(--ocb-transparent)); }

/* ============================ Rodapé ============================ */
.acr-footer { background: var(--azul-marinho-ink); color: color-mix(in srgb, var(--ocb-branco) 80%, var(--ocb-transparent)); }
.acr-footer__anuario { background: var(--azul-marinho); }

.anuario-foot {
    max-width: 1240px;
    margin: 0 auto;
    padding: 38px 32px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}

.acr-footer__anuario-brand { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.acr-footer__anuario-links { display: flex; gap: 26px; flex-wrap: wrap; }
.anuario-fonte { font-style: italic; font-size: 12px; color: color-mix(in srgb, var(--ocb-branco) 60%, var(--ocb-transparent)); text-align: right; }
.acr-footer__rule { height: 3px; background: linear-gradient(90deg, var(--ramo), var(--ramo-2)); }
.acr-footer__main { max-width: 1240px; margin: 0 auto; padding: 64px 32px 24px; }
.foot-top { display: grid; grid-template-columns: 220px repeat(5, 1fr); gap: 32px; }

.foot-link { color: color-mix(in srgb, var(--ocb-branco) 75%, var(--ocb-transparent)); text-decoration: none; transition: color .18s; }
.foot-link:hover { color: var(--ocb-branco); }

.foot-top h5 {
    font-family: var(--font-display-alt);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ocb-branco);
    margin: 0 0 14px;
}

.foot-top > div > a.foot-link { display: block; padding: 4px 0; font-size: 12px; }

.acr-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.acr-footer__social a { width: 30px; height: 30px; border: 1px solid color-mix(in srgb, var(--ocb-branco) 40%, var(--ocb-transparent)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ocb-branco); font-size: 14px; }

.foot-bottom {
    margin-top: 44px;
    padding-top: 20px;
    border-top: 1px solid color-mix(in srgb, var(--ocb-branco) 12%, var(--ocb-transparent));
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 24px;
    align-items: center;
    font-size: 11px;
    color: color-mix(in srgb, var(--ocb-branco) 55%, var(--ocb-transparent));
}

.acr-footer__marks { display: flex; gap: 18px; align-items: center; }
.acr-footer__marks span { font-family: var(--font-intro-bold); font-weight: 700; font-size: 12px; color: color-mix(in srgb, var(--ocb-branco) 65%, var(--ocb-transparent)); }

/* ============================ Responsivo ============================ */
@media (max-width: 1000px) {
    .site-nav-links,
    .somos-badge,
    .subnav-links,
    .subnav-search { display: none !important; }
    .hamburger { display: inline-flex !important; }
    .kpi-grid { grid-template-columns: 1fr !important; }
    .panorama-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 28px !important; }
    .acr-cat-grid { grid-template-columns: 1fr !important; }
    .fin-kpis { grid-template-columns: 1fr 1fr !important; }
    .acr-band { grid-template-columns: 1fr !important; text-align: center; gap: 22px !important; }
    .acr-band__action { align-items: center; }
    .foot-top { grid-template-columns: 1fr 1fr !important; gap: 28px !important; }
    .foot-bottom { grid-template-columns: 1fr !important; }
    .anuario-foot { grid-template-columns: 1fr !important; gap: 18px !important; }
    .anuario-fonte { text-align: left !important; }
    .acr-section { padding-left: 22px !important; padding-right: 22px !important; }
    .acr-hero { padding-left: 22px; padding-right: 22px; }
    .acr-hero__title { font-size: 26px; }
    .acr-h2 { font-size: 30px; }
}

@media (max-width: 620px) {
    .fin-kpis { grid-template-columns: 1fr !important; }
    .foot-top { grid-template-columns: 1fr !important; }
}

/* Fallback quando color-mix não é suportado */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .acr-kpi__icon { background: var(--bg-2); }
    .acr-legend__bar { background: linear-gradient(90deg, #f0f2f8, var(--ramo-2), var(--ramo), var(--ramo-esc)); }
}

/* ============================================================
   Seções específicas de ramo (ex.: Agropecuário)
   ============================================================ */
.acr-intro__lead + .acr-intro__lead { margin-top: 22px; }
.acr-intro__lead--muted { color: var(--ink-3); }

/* KPI com cabeçalho (ícone + tag/chip) */
.acr-kpi__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.acr-kpi__head .acr-kpi__icon { margin-bottom: 0; }

.acr-tag {
    font-weight: 700;
    font-size: 12px;
    color: var(--ink-4);
    background: var(--bg-3);
    border-radius: 999px;
    padding: 4px 11px;
}

.fin-kpis--3 { grid-template-columns: repeat(3, 1fr); max-width: none; }
.fin-kpis--4 { grid-template-columns: repeat(4, 1fr); max-width: none; margin-top: 40px; }

/* Faixa "Volta para a sociedade" — mesmo estilo dos cards de KPI: só borda e
   informações, sem banner/degradê nem arte decorativa. */
.acr-society {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--ocb-branco);
    border: 1px solid var(--line);
    border-radius: 16px;
    color: var(--ink-2);
    padding: 40px 44px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    justify-items: center;
    text-align: center;
}

.acr-society__figure { position: relative; }
.acr-society__eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display-alt); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--ramo-esc); margin-bottom: 14px; }
.acr-society__lede { font-size: 22px; line-height: 1.45; color: var(--ink-2); margin: 0 auto 18px; max-width: 44ch; }
.acr-society__value { font-family: var(--font-display); font-weight: 300; font-size: 62px; line-height: .94; letter-spacing: -.02em; }
.acr-society__value span { font-size: 28px; color: var(--ink-3); }
.acr-society__cap { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); margin-top: 12px; max-width: 34ch; }
.acr-society__text { font-size: 19px; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 48ch; }

/* Intercooperação */
.inter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 26px; }
.icard { padding: 26px 24px; transition: box-shadow .2s, transform .2s; }
.icard:hover { box-shadow: 0 14px 32px color-mix(in srgb, var(--ocb-azul-marinho) 8%, var(--ocb-transparent)); transform: translateY(-3px); }
.icard__top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.icard__top img { width: 62px; height: 62px; object-fit: contain; flex: none; }
.icard__pct { font-family: var(--font-display); font-weight: 300; font-size: 48px; line-height: 1; }
.icard__txt { font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.icard__txt strong { color: var(--ink-2); }

.acr-inter-note { background: var(--bg-2); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px; display: flex; gap: 18px; align-items: flex-start; }
.acr-inter-note .acr-kpi__icon { margin-bottom: 0; flex: none; }
.acr-inter-note p { font-size: 15.5px; line-height: 1.62; color: var(--ink-3); margin: 0; }

/* Dados complementares */
.compl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.acr-compl { padding: 28px 30px; }
.acr-compl__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.acr-compl__head .acr-kpi__icon { margin-bottom: 0; width: 42px; height: 42px; font-size: 20px; }
.acr-compl__title {font-family: var(--font-inter); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.acr-compl__figure { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 14px 0 2px; }
.acr-compl__value { font-family: var(--font-display); font-weight: 300; font-size: 48px; line-height: 1; color: var(--ink-2); }
.acr-compl__sub { font-size: 13.5px; color: var(--ink-3); margin-bottom: 6px; }

.acr-cred { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: center; margin-top: 6px; }
.acr-cred__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.acr-cred__legend li { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-3); }
.acr-cred__legend li span { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.acr-cred__legend li strong { margin-left: auto; color: var(--ink-2); }

.acr-compl__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}

.acr-compl__head .acr-kpi__icon {
    margin-bottom: 0;
    width: 42px;
    height: 42px;
    font-size: 20px;
}

.acr-compl__title {
    font-weight: 700;
    font-size: 15px;
    color: var(--ink-2);
}

.acr-compl__figure {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 2px;
}

.acr-compl__value {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 48px;
    line-height: 1;
    color: var(--ink-2);
}

.acr-compl__sub {
    font-size: 13.5px;
    color: var(--ink-3);
    margin-bottom: 6px;
}

/* Crédito rural — barra empilhada + legenda em grade (2 colunas). */
.acr-cred-stack {
    margin-top: 4px;
}

.acr-cred-stack__bar {
    display: flex;
    width: 100%;
    height: 46px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
}

.acr-cred-stack__seg {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
}

.acr-cred-stack__seg--ink {
    color: #1f5340;
}

.acr-cred-stack__legend {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px 20px;
}

.acr-cred-stack__legend li {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: var(--ink-3);
}

.acr-cred-stack__dot {
    width: 11px;
    height: 11px;
    border-radius: 3px;
    flex: none;
}

.acr-cred-stack__label {
    flex: 1;
}

.acr-cred-stack__val {
    font-weight: 700;
    color: var(--ink-2);
}

.acr-cred-stack__total {
    font-size: 11.5px;
    color: var(--ink-4);
    margin-top: 12px;
}

.acr-cred-stack__total strong {
    color: var(--ink-2);
}

/* Tooltip azul (mesmo azul-marinho dos títulos) nas barras do crédito rural.
   Elemento flutuante criado via JS e anexado ao .ac-ramos-page (herda --ink-2);
   posicionado com position:fixed para escapar do overflow:hidden da barra. */
.acr-cred-tip {
    position: fixed;
    z-index: 9999;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--ink-2);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, calc(-100% - 9px));
    transition: opacity .12s ease;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ocb-azul-marinho) 30%, var(--ocb-transparent));
}
.acr-cred-tip::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--ink-2);
}
.acr-cred-tip.is-on { opacity: 1; }

.acr-note {
    font-style: italic;
    font-size: 11.5px;
    color: var(--ink-4);
    margin: 10px 0 0;
}

/* Charts auxiliares */
.acr-chart--mini {
    height: 200px;
}

/* Prosa (Desafios e Oportunidades): wrap na largura padrão (.acr-wrap = 1180, borda
   esquerda alinhada às demais seções) e a coluna de leitura (900) alinhada à esquerda,
   em vez de centralizada. */
.acr-wrap--narrow > * { max-width: 1180px; }
.acr-h2--mb { margin-bottom: 26px; }
.acr-prose { font-size: 18px; line-height: 1.7; color: var(--ink-3); margin: 0 0 20px; font-family: var(--font-inter); }
.acr-prose--strong { color: var(--ink-2); }
.acr-prose:last-child { margin-bottom: 0; }
.acr-desafio { margin: 0 0 20px; }
.acr-desafio:last-child { margin-bottom: 0; }
.acr-desafio__label { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ramo-esc); margin-bottom: 6px; }

/* Conteúdo vindo do editor WYSIWYG (Textos dos Ramos). Aplicado junto de um
   container tipográfico (ex.: .acr-intro__lead, .acr-prose, .acr-p): os
   elementos internos herdam a fonte/cor do container e as margens de bloco das
   pontas são zeradas para casar com o layout. */
.acr-rte > :first-child { margin-top: 0; }
.acr-rte > :last-child { margin-bottom: 0; }
.acr-rte p { font: inherit; color: inherit; margin: 0 0 .8em; }
.acr-rte p:last-child { margin-bottom: 0; }
.acr-rte ul, .acr-rte ol { margin: 0 0 .8em; padding-left: 1.4em; }
.acr-rte li { margin-bottom: .25em; }
.acr-rte strong, .acr-rte b { color: var(--ink-2); font-weight: 700; }
.acr-rte a { color: var(--ramo-esc); text-decoration: underline; }
/* Títulos internos (ex.: rótulos de segmento em "Desafios": Energia, Telecom…). */
.acr-rte h2, .acr-rte h3, .acr-rte h4 { font-family: var(--font-inter); font-weight: 700; font-size: 15px; line-height: 1.3; color: var(--ramo-esc); margin: 1.4em 0 .35em; }
.acr-rte > h2:first-child, .acr-rte > h3:first-child, .acr-rte > h4:first-child { margin-top: 0; }

/* Corpo dos ramos: TODO <p> com o mesmo estilo — 16px, Inter, entrelinha 1.66, cor forte
   (ink-2), i.e. o look do .acr-intro__lead--muted em 16px/ink-2. Dentro de cards, 14px. */
.ac-ramos-page .acr-section p,
.ac-ramos-page .acr-hero p { font-family: var(--font-inter); font-size: 16px; line-height: 1.66; color: var(--ink-2); max-width: 1180px; }
.ac-ramos-page .acr-section .card p,
.ac-ramos-page .acr-section [class*="-card"] p { font-size: 16px; }

/* ============================================================
   Ramo Seguros — página narrativa (sem dados estatísticos próprios).
   ============================================================ */

/* Badge de destaque (intro) + destaque inline de termos regulatórios. */
.acr-badge { display: inline-flex; align-items: center; gap: 9px; background: var(--ramo-tint); color: var(--ramo-esc); border-radius: 999px; padding: 7px 16px; font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .02em; margin-bottom: 22px; }
.acr-hl { color: var(--ramo-esc); background: var(--ramo-tint); padding: 1px 8px; border-radius: 6px; }
.acr-lead-lg { font-family: var(--font-body); font-size: 20px; line-height: 1.62; color: var(--ink-2); margin: 0 0 22px; max-width: 60ch; }
.acr-body { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--ink-3); margin: 0 0 22px; }
.acr-body:last-child { margin-bottom: 0; }
.acr-body strong { color: var(--ink-2); }

/* Timeline dos marcos regulatórios. */
.acr-tl__item { display: flex; gap: 22px; }
.acr-tl__rail { display: flex; flex-direction: column; align-items: center; flex: none; }
.acr-tl__num { width: 44px; height: 44px; border-radius: 50%; background: var(--ramo-2); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 300; font-size: 20px; flex: none; }
.acr-tl__num--win { background: linear-gradient(135deg, var(--ramo-esc), var(--ramo-2)); box-shadow: 0 6px 18px color-mix(in srgb, var(--ramo) 32%, var(--ocb-transparent)); }
.acr-tl__line { width: 2px; flex: 1; background: var(--ramo-line); min-height: 12px; }
.acr-tl__item:last-child .acr-tl__line { display: none; }
.acr-tl__card { flex: 1; background: var(--ocb-branco); border: 1px solid var(--line); border-radius: 14px; padding: 22px 26px; margin-bottom: 22px; transition: box-shadow .2s, transform .2s; }
.acr-tl__card:hover { box-shadow: 0 12px 30px color-mix(in srgb, var(--ocb-azul-marinho) 8%, var(--ocb-transparent)); transform: translateY(-2px); }
.acr-tl__card--win { border-color: var(--ramo-2); background: linear-gradient(135deg, var(--ocb-branco), var(--ramo-tint)); }
.acr-tl__label { font-family: var(--font-body); font-weight: 700; font-size: 16px; color: var(--ramo-esc); margin-bottom: 6px; }
.acr-tl__txt { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 0; }
.acr-tl__wineyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display-alt); font-weight: 400; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ramo-esc); margin-bottom: 8px; }

/* Faixa "mutualidade e proteção" (society-band). */
.acr-seg-band { border-radius: 22px; background: var(--ocb-branco); border: 1.5px solid var(--line); padding: 50px 52px; }
.acr-seg-band__lead { font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 1.34; color: var(--ink-2); margin: 0; max-width: 80ch; }
.acr-seg-band__note { font-family: var(--font-body); font-size: 16px; line-height: 1.6; color: var(--ink-3); margin: 20px 0 0; }

/* KPI cards com borda (setor no Mundo / Brasil): legenda em cima, número embaixo. */
.kpi5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-bottom: 24px; }
.kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.acr-skpi { padding: 24px 22px; background: transparent; border: 1.5px solid var(--ramo-esc); }
.acr-skpi__cap { font-family: var(--font-body); font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--ink-3); margin-bottom: 14px; }
.acr-skpi__num { font-family: var(--font-display); font-weight: 300; font-size: 38px; line-height: 1; color: var(--ink-2); }
.acr-skpi__num span { font-size: 16px; color: var(--ink-3); }
.acr-skpi--lg .acr-skpi__num { font-size: 42px; }

/* "Como funcionam" (card com ícone à esquerda). */
.acr-howto { padding: 40px 44px; border-left: 5px solid var(--ramo-2); display: flex; gap: 26px; align-items: flex-start; flex-wrap: wrap; }
.acr-howto__icon { width: 60px; height: 60px; border-radius: 16px; background: var(--ramo-tint); color: var(--ramo-esc); display: flex; align-items: center; justify-content: center; flex: none; font-size: 28px; }
.acr-howto__body { flex: 1; min-width: 280px; }
.acr-howto__title { font-family: var(--font-display); font-weight: 300; font-size: 22px; line-height: 1.14; color: var(--ink-2); margin: 0 0 14px; }
.acr-howto__txt { font-family: var(--font-body); font-size: 17px; line-height: 1.7; color: var(--ink-3); margin: 0; }
.acr-howto__txt strong { color: var(--ink-2); }

@media (max-width: 1000px) {
    .kpi5 { grid-template-columns: repeat(2, 1fr) !important; }
    .kpi4 { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 1000px) {
    .fin-kpis--3 { grid-template-columns: 1fr !important; }
    .acr-society { grid-template-columns: 1fr !important; gap: 24px !important; }
    .inter-grid { grid-template-columns: 1fr 1fr !important; }
    .compl-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 620px) {
    .acr-seg-bars__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .acr-seg-bars__label,
    .acr-seg-bars__pct {
        text-align: left;
    }

    .inter-grid {
        grid-template-columns: 1fr !important;
    }

    .acr-cred-stack__legend {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Saúde: destaques (scard) e lede com ênfase ---- */
.acr-lede strong { color: var(--ink-2); font-weight: 700; }
.acr-head--wide { max-width: 1180px; }
.acr-compl__eyebrow { margin: 24px 0 16px; color: var(--ramo-esc); }

.scard { padding: 28px 30px; display: flex; gap: 18px; align-items: flex-start; transition: box-shadow .2s, transform .2s; }
.scard:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--ocb-azul-marinho) 7%, var(--ocb-transparent)); transform: translateY(-2px); }
.scard .acr-kpi__icon { margin-bottom: 0; width: 48px; height: 48px; font-size: 22px; flex: none; }
.scard__value { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.05; color: var(--ink-2); margin-bottom: 6px; }
.scard__value span { color: var(--ramo-esc); }
.scard__txt { font-size: 14.5px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.scard__txt strong { color: var(--ink-2); }

/* Intro dos "Segmentos em destaque" (TPBS). */
.acr-seg-intro { max-width: 860px; margin-bottom: 44px; }

/* Cabeçalho dos segmentos em destaque do TPBS (Mineral, Produção artesanal…). */
.acr-seg-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.acr-seg-head__icon {
    width: 58px;
    height: 58px;
    border-radius: 15px;
    background: linear-gradient(135deg, var(--ramo), var(--ramo-esc));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--ramo) 22%, var(--ocb-transparent));
    font-size: 26px;
}
.acr-seg-head__title { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1.08; color: var(--ink-2); margin: 0; }
.acr-seg-lead { font-family: var(--font-body); font-size: 16px; line-height: 1.66; color: var(--ink-3); margin: 0 0 30px; max-width: 96ch; }
.acr-mini-eyebrow { font-family: var(--font-display-alt); font-weight: 400; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ramo-esc); margin-bottom: 16px; }
.acr-mini-eyebrow--green { color: #2e7d52; }

/* Cards "Você sabia?" (tri-grid do TPBS): ícone médio, eyebrow e texto. */
.acr-tri-card { padding: 28px; display: flex; flex-direction: column; }
.acr-tri-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    background: var(--ramo-tint);
    color: var(--ramo-esc);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 20px;
}
.acr-tri-card__eyebrow { font-family: var(--font-display-alt); font-weight: 400; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ramo-esc); margin-bottom: 9px; }
.acr-tri-card__txt { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--ink-3); margin: 0; }

/* Grids dos blocos exclusivos do TPBS (base; o responsivo já existe abaixo). */
.stat4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 36px; }
.min-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 36px; }
.tri-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.acr-seg-cards { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.acr-seg-cards > .acr-tri-card { flex: 1 1 320px; max-width: 380px; }
.acr-tri-card__badge { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.acr-tri-card__badge .acr-tri-card__icon { margin-bottom: 0; }
.acr-tri-card__note { font-family: var(--font-body); font-style: italic; font-size: 11.5px; color: var(--ink-4); margin-top: auto; }
.acr-tri-card__tag { font-family: var(--font-body); font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ramo-esc); background: var(--ramo-tint); border: 1px solid var(--ramo-line); border-radius: 999px; padding: 3px 10px; }
.duo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.acr-donut-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; margin-bottom: 24px; }

/* Painéis de gráfico do TPBS (donut de títulos, barras de substâncias). */
.acr-panel { padding: 28px 30px; }
.acr-panel--lg { padding: 32px 34px; }
.acr-panel__title { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink-2); margin-bottom: 2px; }
.acr-panel__sub { font-family: var(--font-body); font-size: 12px; color: var(--ink-4); margin-bottom: 14px; }
.acr-tri-card__txt strong { color: var(--ink-2); }

/* Donut de títulos minerários + legenda (TPBS). */
.acr-donut-chart { height: 240px; width: 100%; }
.acr-titulos-leg { padding: 28px 30px; display: flex; flex-direction: column; justify-content: center; }
.acr-titulos-leg__item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; }
.acr-titulos-leg__item:not(:last-child) { border-bottom: 1px solid var(--line); }
.acr-titulos-leg__dot { width: 14px; height: 14px; border-radius: 4px; flex: none; margin-top: 4px; }
.acr-titulos-leg__head { display: flex; align-items: baseline; gap: 8px; }
.acr-titulos-leg__name { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink-2); }
.acr-titulos-leg__pct { font-family: var(--font-display); font-weight: 300; font-size: 20px; color: var(--ramo-esc); }
.acr-titulos-leg__txt { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 2px; }

.acr-compl__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-3);
    margin: 0;
}

.acr-compl__text strong {
    color: var(--ink-2);
}

.acr-rank {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin: 14px 0 12px;
}

.acr-rank__num {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 56px;
    line-height: 1;
    color: var(--ramo-2);
}

.acr-rank__num--ink {
    color: var(--ink-2);
}

.acr-rank__cap {
    font-weight: 700;
    font-size: 14px;
    color: var(--ink-2);
}

/* ---- Crédito: cards de estatística (SFN) + complementares em 3 colunas ---- */
.acr-stat-grid { display: grid; gap: 16px; margin-bottom: 16px; }
.acr-stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.acr-stat-grid--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 30px; }
.acr-stat { padding: 22px; }
.acr-stat__figure { display: flex; align-items: baseline; gap: 8px; }
.acr-stat__num { font-family: var(--font-display); font-weight: 300; font-size: 36px; line-height: 1; color: var(--ink-2); }
.acr-stat__num--accent { color: var(--ramo-esc); }
.acr-stat__num--sm { font-size: 30px; }
.acr-stat__num small { font-size: 16px; color: var(--ink-3); }
.acr-stat__delta { font-weight: 700; font-size: 12px; color: var(--ramo-esc); }
.acr-stat__label { font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-bottom: 8px; }
.acr-stat__muted { color: var(--ink-4); }
.compl-grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1000px) {
    .acr-stat-grid--4 { grid-template-columns: 1fr 1fr; }
    .acr-stat-grid--3 { grid-template-columns: 1fr; }
    .compl-grid--3 { grid-template-columns: 1fr; }
}

/* ---- Infra: IASC · TPBS: cards de aviso ---- */
.acr-iasc { display: flex; gap: 28px; flex-wrap: wrap; margin: 14px 0 12px; }
.acr-iasc__item { display: flex; flex-direction: column; gap: 4px; }
.acr-info { padding: 24px 26px; }
.acr-info__title { font-weight: 700; font-size: 15px; color: var(--ink-2); margin-bottom: 8px; }
.acr-info__txt { font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.acr-info__txt strong { color: var(--ink-2); }

/* ---- Destaques comuns (padrão Dados Gerais): 3 cards ---- */
.acr-destaques-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.acr-dcard { padding: 26px 28px; }
.acr-dcard__title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 16px; }
.acr-dcard__title i { color: var(--ramo-esc); }

.acr-dstat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.acr-dstat li { display: flex; flex-direction: column; gap: 3px; }
.acr-dstat__num { font-family: var(--font-display); font-weight: 300; font-size: 30px; line-height: 1; color: var(--ramo-esc); }
.acr-dstat__txt { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }

.acr-drow { list-style: none; margin: 0; padding: 0; }
.acr-drow li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); }
.acr-drow li:first-child { border-top: none; }
.acr-drow strong { color: var(--ink-2); white-space: nowrap; }

.acr-dlinks { display: flex; flex-direction: column; }
.acr-dlinks a { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-3); text-decoration: none; transition: color .16s; }
.acr-dlinks a:first-child { border-top: none; }
.acr-dlinks a:hover { color: var(--ramo-esc); }
.acr-dlinks a i { color: var(--ramo-esc); width: 18px; text-align: center; }

@media (max-width: 1000px) {
    .acr-destaques-grid { grid-template-columns: 1fr; }
}

/* ---- Seletor de ano por setas (stepper) no card do mapa ---- */
.acr-map-card__bar--right { justify-content: flex-end; }
.acr-ystep { display: flex; flex-direction: column; align-items: center; align-self: flex-end; gap: 5px; }
.acr-ystep__btn { width: 32px; height: 28px; border: 1px solid var(--line); background: var(--ocb-branco); border-radius: 9px; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color .16s, color .16s, border-color .16s; text-decoration: none; font-size: 13px; }
.acr-ystep__btn:hover { background: var(--ramo-esc); color: var(--ocb-branco); border-color: var(--ramo-esc); }
.acr-ystep__btn.is-disabled { opacity: .35; pointer-events: none; }
.acr-ystep__year { font-family: var(--font-display); font-weight: 300; font-size: 26px; line-height: 1; color: var(--ink-2); }

/* ==== Bloco "Energia em detalhe" (Ramo Infraestrutura) ==== */
/* org-list é a versão mobile do organograma (a org-tree é a de desktop). */
.org-list { display: none; margin: 0; padding: 0; }

/* ------------------------------------------------------------------
   Ramo Infraestrutura — classes das seções de energia e qualidade
   (portadas dos estilos inline do design comp).
   ------------------------------------------------------------------ */

/* Utilitários de margem inferior (espaçamento entre blocos das seções). */
.acr-mb-22 { margin-bottom: 22px; }
.acr-mb-24 { margin-bottom: 24px; }
.acr-mb-30 { margin-bottom: 30px; }
.acr-mb-34 { margin-bottom: 34px; }
.acr-mt-34 { margin-top: 34px; }
.acr-stack-12 { display: flex; flex-direction: column; gap: 12px; }

/* Subtítulos de bloco (h3) + wrapper em linha base. */
.acr-h3 { font-family: var(--font-display); font-weight: 300; font-size: 28px; line-height: 1.14; color: var(--ink-2); margin: 0; }
.acr-h3--sm { font-size: 22px; }
.acr-h3--mb { margin-bottom: 12px; }
.acr-h3-row { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }

/* Intro de bloco (largura contida). */
.acr-block-intro { max-width: 1180px; margin-bottom: 28px; }

/* Parágrafo padrão das seções de energia. */
.acr-p { font-family: var(--font-body); font-size: 16px; line-height: 1.66; color: var(--ink-3); margin: 0 0 22px; max-width: 98ch; }
.acr-p strong { color: var(--ink-2); }
.acr-p--flush { margin-bottom: 0; }
.acr-p--mb28 { margin-bottom: 28px; }
.acr-p--full { max-width: none; }

/* Chip de ícone (fundo tint do ramo); tamanho por modificador. */
.acr-ic { display: inline-flex; align-items: center; justify-content: center; background: var(--ramo-tint); color: var(--ramo-esc); flex: none; }
.acr-ic--32 { width: 32px; height: 32px; border-radius: 9px; font-size: 14px; }
.acr-ic--36 { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.acr-ic--40 { width: 40px; height: 40px; border-radius: 11px; font-size: 17px; }
.acr-ic--42 { width: 42px; height: 42px; border-radius: 11px; font-size: 18px; margin-bottom: 14px; }
.acr-ic--46 { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; margin-bottom: 14px; }
.acr-ic--green { background: #eaf4ec; color: #2e7d52; }

/* Cards de estatística (coluna: ícone, número, rótulo). */
.acr-estat { padding: 24px; transition: box-shadow .2s, transform .2s; }
.acr-estat:hover { box-shadow: 0 10px 26px color-mix(in srgb, var(--ocb-azul-marinho) 7%, var(--ocb-transparent)); transform: translateY(-2px); }
.acr-estat__num { font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1; color: var(--ink-2); }
.acr-estat__num span { font-size: 18px; color: var(--ink-3); }
.acr-estat--sm .acr-estat__num { font-size: 30px; }
.acr-estat--sm .acr-estat__num span { font-size: 16px; }
.acr-estat__label { font-family: var(--font-body); font-size: 13px; line-height: 1.45; color: var(--ink-3); margin-top: 8px; }

/* Cards de regime (ícone + título em linha, depois texto). */
.acr-rcard { padding: 24px 26px; }
.acr-rcard__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.acr-rcard__title { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.acr-rcard__txt { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.acr-rcard__txt strong { color: var(--ink-2); }

/* Card com ícone no topo + eyebrow + texto (rede/subestações/linhas). */
.acr-icard-top { padding: 24px 26px; }
.acr-icard-top__txt { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--ink-3); margin: 0; }
.acr-icard-top__txt strong { color: var(--ink-2); }

/* Linha ícone + texto (fontes renováveis). */
.acr-ic-row { display: flex; gap: 12px; align-items: flex-start; }
.acr-ic-row__txt { font-family: var(--font-body); font-size: 13.5px; line-height: 1.4; color: var(--ink-3); }
.acr-ic-row__txt strong { color: var(--ink-2); }

/* "Fatos" em wrap central (destaques da geração convencional). */
.acr-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }
.acr-fact { display: flex; gap: 13px; align-items: flex-start; flex: 0 1 300px; }
.acr-fact__txt { font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.acr-fact__txt strong { color: var(--ink-2); }

/* Título/subtítulo internos de card. */
.acr-card-h { font-family: var(--font-body); font-weight: 700; font-size: 15px; color: var(--ink-2); }
.acr-card-h--mb { margin-bottom: 18px; }
.acr-card-sub { font-family: var(--font-body); font-size: 12px; color: var(--ink-4); }

/* Nota destacada (ACL). */
.acr-note-box { background: var(--ocb-branco); border: 1px solid var(--line); border-radius: 16px; padding: 22px 26px; display: flex; gap: 16px; align-items: flex-start; }
.acr-note-box__txt { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--ink-3); margin: 0; max-width: 98ch; }
.acr-note-box__txt strong { color: var(--ink-2); }

/* Divisória entre subseções. */
.acr-subdiv { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--line); }

/* Barra de abas (GD). */
.acr-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.acr-gd-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

/* Organograma de energia — árvore (desktop). */
.acr-org-card { padding: 44px 26px 40px; }
.org-tree { display: flex; flex-direction: column; align-items: center; }
.acr-org__root { background: var(--azul-marinho); color: #fff; padding: 13px 28px; border-radius: 12px; font-family: var(--font-display); font-weight: 300; font-size: 20px; box-shadow: 0 8px 20px rgba(23, 28, 102, .16); white-space: nowrap; }
.acr-org__branch { background: linear-gradient(135deg, var(--ramo-esc), var(--ramo)); color: #fff; padding: 11px 22px; border-radius: 11px; font-family: var(--font-body); font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 6px 16px rgba(181, 111, 14, .22); }
.acr-org__leaf { background: var(--ramo-tint); color: var(--ramo-esc); border: 1px solid var(--ramo-line); border-radius: 9px; padding: 8px 12px; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.acr-org__cols { display: flex; align-items: flex-start; width: 100%; max-width: 900px; }
.acr-org__col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.acr-org__leaves { display: flex; width: 100%; }
.acr-org__stem { width: 2px; background: var(--ramo-line); }
.acr-org__stem--26 { height: 26px; }
.acr-org__stem--22 { height: 22px; }
.acr-org__conn { position: relative; width: 100%; }
.acr-org__conn--22 { height: 22px; }
.acr-org__conn--20 { height: 20px; }
.acr-org__hline { position: absolute; top: 0; height: 2px; background: var(--ramo-line); }
.acr-org__hline--l { left: 50%; right: 0; }
.acr-org__hline--full { left: 0; right: 0; }
.acr-org__hline--r { left: 0; right: 50%; }
.acr-org__drop { position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background: var(--ramo-line); transform: translateX(-1px); }

/* Organograma — lista (mobile). */
.org-list ul { list-style: none; }
.acr-org-list__l1 { display: inline-flex; align-items: center; gap: 9px; background: var(--azul-marinho); color: #fff; padding: 9px 16px; border-radius: 10px; font-family: var(--font-display); font-weight: 300; font-size: 16px; }
.acr-org-list__g1 { margin: 12px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--ramo-line); display: flex; flex-direction: column; gap: 16px; }
.acr-org-list__l2 { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--ramo-esc), var(--ramo)); color: #fff; padding: 7px 14px; border-radius: 9px; font-family: var(--font-body); font-weight: 700; font-size: 14px; }
.acr-org-list__g2 { margin: 8px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--ramo-line); display: flex; flex-direction: column; gap: 6px; font-family: var(--font-body); font-size: 13.5px; color: var(--ink-3); }

/* Bloco "infraestrutura por trás da distribuição" (tri). */
.tri3 { display: flex; flex-direction: column; align-items: center; margin-bottom: 28px; }
.tri-top { width: 100%; max-width: 420px; }
.tri-conn { position: relative; width: 100%; max-width: 780px; height: 34px; }
.tri-conn__v-top { position: absolute; top: 0; left: 50%; width: 2px; height: 17px; background: var(--ramo-line); transform: translateX(-1px); }
.tri-conn__h { position: absolute; top: 17px; left: 25%; right: 25%; height: 2px; background: var(--ramo-line); }
.tri-conn__v-l { position: absolute; top: 17px; left: 25%; width: 2px; height: 17px; background: var(--ramo-line); transform: translateX(-1px); }
.tri-conn__v-r { position: absolute; top: 17px; left: 75%; width: 2px; height: 17px; background: var(--ramo-line); transform: translateX(-1px); }
.tri-row { display: flex; gap: 18px; width: 100%; max-width: 780px; }
.tri-row > .card { flex: 1; }

/* Variações de proporção do compl-grid. */
.compl-grid--wide { grid-template-columns: 1.15fr .85fr; }
.compl-grid--qual { grid-template-columns: 1.3fr .7fr; }

/* Indicadores de qualidade (IASC). */
.acr-qcard-title { font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink-2); margin-bottom: 22px; }
.acr-qbar { margin-bottom: 24px; }
.acr-qbar--last { margin-bottom: 8px; }
.acr-qbar__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.acr-qbar__name { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--ink-2); }
.acr-qbar__val { font-family: var(--font-display); font-weight: 300; font-size: 28px; color: var(--ramo-esc); }
.acr-qbar__val--gray { color: var(--ink-3); }
.acr-qbar__track { height: 14px; border-radius: 8px; background: var(--bg-3); overflow: hidden; }
.acr-qbar__fill { height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--ramo), var(--ramo-esc)); }
.acr-qbar__fill--gray { background: linear-gradient(90deg, #aab0c8, #8a90ac); }
.acr-qnote { font-family: var(--font-body); font-size: 12.5px; color: var(--ink-4); margin-top: 18px; }
.acr-qcol { display: flex; flex-direction: column; gap: 20px; }
.acr-qbest { background: linear-gradient(135deg, var(--ramo-esc), var(--ramo)); border-radius: 16px; padding: 28px; color: #fff; }
.acr-qbest__label { font-family: var(--font-body); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: rgba(255, 255, 255, .9); margin-bottom: 8px; }
.acr-qbest__num { font-family: var(--font-display); font-weight: 300; font-size: 52px; line-height: 1; }
.acr-qbest__num span { font-size: 24px; }
.acr-qbest__txt { font-family: var(--font-body); font-size: 13px; color: rgba(255, 255, 255, .9); margin-top: 8px; }
.acr-qmini { padding: 24px 26px; }
.acr-qmini__row { display: flex; align-items: baseline; gap: 10px; }
.acr-qmini__num { font-family: var(--font-display); font-weight: 300; font-size: 36px; line-height: 1; color: var(--ink-2); }
.acr-qmini__txt { font-family: var(--font-body); font-size: 13px; color: var(--ink-3); }

@media (max-width: 1000px) {
    .stat4 { grid-template-columns: 1fr 1fr !important; }
    .tri-grid { grid-template-columns: 1fr !important; }
    .duo-grid { grid-template-columns: 1fr !important; }
    .min-grid { grid-template-columns: 1fr !important; }
    .tri-row { flex-direction: column !important; }
}

@media (max-width: 820px) {
    .org-tree { display: none !important; }
    .org-list { display: block !important; }
}

@media (max-width: 620px) {
    .stat4 { grid-template-columns: 1fr !important; }
}

.acr-nd { color: var(--ink-4); font-weight: 400; }

/* Estado "dado ainda não disponível" (ex.: gráfico financeiro sem série no banco) */
.acr-chart-nd {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height: 100%;
    min-height: 140px;
    padding: 24px;
    color: var(--ink-4);
    font-size: 14px;
    font-style: italic;
}