/* ============================================================
   ÍNDICE
   Abas
   Acordeões
   Botões
   Campos
   Cards
   Efeitos
   Grids
   Header
   Indicadores
   Menu
   Modal
   Página
   Sidebar
   Tabelas
   Títulos
   Utilitários
   ============================================================ */

/* ==================== Abas ==================== */
        .abas-menu {display:flex; flex-wrap:wrap; gap:10px; padding-bottom:20px; border-bottom:1px solid var(--linha)}
        .abas-tab {display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 18px; border:1px solid var(--linha); border-radius:8px; color:var(--texto); background:var(--card-fundo); font:600 13px/1.4 Roboto,sans-serif; cursor:pointer; transition:background-color .22s ease}
        .abas-tab svg,.abas-tab i {width:18px}
        .abas-tab.active {color:var(--botao-texto); background:var(--botao-fundo); border-color:var(--botao-fundo)}
        .abas[data-abas-ativa] > .abas-painel:not(.active) {display:none}
        .abas-tab:focus-visible {outline:2px solid var(--link); outline-offset:3px}
        @media(hover:hover) and (pointer:fine) {
            .abas-tab:not(.active):hover {background:var(--fundo-destaque)}
            .abas-tab.active:hover {background:var(--botao-hover)}
        }
        @media(max-width:620px) {.abas-tab {flex:1 1 calc(50% - 10px)}}

/* ==================== Acordeões ==================== */
        .acord-seta { flex:none; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s ease; }
/* ==================== Acordeões ==================== */
/* TIPO 1 — CSS */
                .sanfona-item { border-bottom:1px solid var(--linha); }
                .sanfona-item:first-child { border-top:1px solid var(--linha); }
                .sanfona-cab { display:flex; align-items:center; gap:12px; width:100%; padding:14px 12px; border:0; border-left:3px solid var(--link); border-radius:0 6px 6px 0; background:var(--fundo-suave); color:var(--texto); text-align:left; cursor:pointer; font:700 15px/1.4 Roboto,Arial,sans-serif; }
                .sanfona-cab:hover { background:var(--fundo-destaque); }
                .sanfona-cab .acord-seta { margin-left:auto; }
                .sanfona-cab[aria-expanded="true"] .acord-seta { transform:rotate(-135deg); }
                .sanfona-painel { max-height:0; overflow:hidden; transition:max-height .3s ease; }
                .sanfona-texto { padding:14px 12px 18px; color:var(--texto-suave); }

/* ==================== Acordeões ==================== */
/* TIPO 2 — CSS */
                .maismenos-item { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid var(--linha); color:var(--titulo); cursor:pointer; font:700 15px/1.45 Roboto,Arial,sans-serif; }
                .maismenos-item:hover { color:var(--link); }
                .maismenos-ic { flex:none; margin-top:1px; color:var(--link); font:800 18px/1 Roboto,Arial,sans-serif; }
                .maismenos-conteudo { max-height:0; overflow:hidden; transition:max-height .35s ease; }
                .maismenos-texto { padding:2px 0 16px; color:var(--texto-suave); }

/* ==================== Acordeões ==================== */
/* TIPO 3 — CSS */
                .faq-item { border-bottom:1px solid var(--linha); }
                .faq-item:first-child { border-top:1px solid var(--linha); }
                .faq-titulo { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:15px 0; color:var(--titulo); cursor:pointer; font:700 15px/1.45 Roboto,Arial,sans-serif; }
                .faq-titulo:hover { color:var(--link); }
                .faq-titulo .acord-seta { margin-top:5px; color:var(--link); }
                .faq-titulo[aria-expanded="true"] .acord-seta { transform:rotate(-135deg); }
                .faq-conteudo { max-height:0; overflow:hidden; transition:max-height .35s ease; }
                .faq-texto { padding:0 0 16px; color:var(--texto-suave); }

/* ==================== Acordeões ==================== */
/* TIPO 4 — CSS (padrão do site; idêntico ao bloco de acordeões do comum.css) */
                .acordion-grade { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:18px; position:relative; }
                .acordion-light { position:relative; min-width:0; border:1px solid var(--linha); border-radius:12px; color:var(--texto); background:var(--card-fundo); }
                .acordion-light > summary { display:flex; align-items:center; gap:14px; padding:18px; list-style:none; cursor:pointer; }
                .acordion-light > summary::-webkit-details-marker { display:none; }
                .acordion-titulo { min-width:0; flex:1; }
                .acordion-titulo h3 { margin:0 0 4px; color:var(--titulo); font:600 17px/1.35 Roboto,sans-serif; }
                .acordion-seta { width:20px; height:20px; flex:0 0 20px; color:var(--link); transition:transform .25s; }
                .acordion-light[open]:not(.is-closing) .acordion-seta { transform:rotate(180deg); }
                .acordion-conteudo { padding:0 18px 18px; }
                .acordion-light[open] { z-index:2; }
                .acordion-light > .acordion-conteudo { position:absolute; top:calc(100% + 8px); left:-1px; right:-1px; padding:18px; max-height:60vh; overflow:auto; overscroll-behavior:contain; border:1px solid var(--linha); border-radius:12px; background:var(--card-fundo); box-shadow:var(--card-sombra); }
                .acordion-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
                .acordion-links a { display:flex; align-items:center; padding:9px 10px; border:1px solid var(--linha); border-radius:6px; color:var(--texto); background:var(--fundo-suave); text-decoration:none; overflow-wrap:anywhere; font:400 13px/1.4 Roboto,sans-serif; }
                .acordion-light > summary:hover { background:var(--fundo-destaque); }
                .acordion-seta svg { width:100%; height:100%; }
                .acordion-seta i { font-size:16px; }

/* ==================== Acordeões ==================== */
/* TIPO 5 — CSS (details/summary + ::details-content, sem JS; padrão do pags.css) */
                .acordion { display:grid; gap:10px }
                .acordion_item { interpolate-size:allow-keywords; overflow:hidden; border:1px solid var(--card-linha); border-radius:10px; color:var(--card-texto); background:var(--card-fundo) }
                .acordion_item::details-content { height:0; opacity:0; overflow:hidden; transition:height .4s ease,opacity .3s ease,content-visibility .4s allow-discrete }
                .acordion_item[open]::details-content { height:auto; opacity:1 }
                .acordion_botao { display:flex; align-items:center; gap:12px; padding:15px; font:700 15px/1.45 Roboto,sans-serif; cursor:pointer; list-style:none }
                .acordion_botao::-webkit-details-marker { display:none }
                .acordion_botao:hover { background:var(--fundo-suave) }
                .acordion .acordion_icone { display:grid; place-items:center; flex:none; width:36px; height:36px; border-radius:8px; color:var(--botao-texto); background:var(--botao-fundo); font-size:16px }
                .acordion_titulo { flex:1; min-width:0; overflow-wrap:anywhere }
                .acordion_seta { flex:none; color:var(--texto-suave); font-size:12px; transition:transform .2s }
                .acordion_item[open] .acordion_seta { transform:rotate(180deg) }
                .acordion_botao:focus-visible,.acordion_arquivos a:focus-visible { outline:2px solid var(--link); outline-offset:-2px }
                .acordion_texto { padding:0 15px 18px 63px; overflow-wrap:anywhere }
                .acordion_texto p { margin:0 0 14px; color:inherit }
                .acordion_texto p:last-child { margin-bottom:0 }
                .acordion_texto img { max-width:100%; height:auto }
                .acordion_arquivos { display:grid; gap:7px }
                .acordion_arquivos a { display:flex; align-items:center; gap:9px; padding:10px 12px; border:1px solid var(--linha); border-radius:6px; color:var(--link); background:var(--fundo-suave); text-decoration:none; font:400 13px/1.5 Roboto,sans-serif }
                .acordion_arquivos a:hover { color:var(--link-hover); background:var(--card-fundo) }
                .acordion_arquivos i { flex:none }
                .acordion_vazio { margin:0; padding:25px; border:1px dashed var(--linha); border-radius:10px; color:var(--texto-suave); background:var(--fundo-suave) }
                @media(max-width:600px) { .acordion_botao { padding:12px; gap:10px; font-size:14px } .acordion_texto { padding:0 12px 15px } }
                @media(prefers-reduced-motion:reduce) { .acordion_item::details-content,.acordion_seta { transition:none } }

/* ==================== Botões ==================== */
/* ==================== BOTÕES GLOBAIS ==================== */
        .btn {
            min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:10px;
            padding:0 22px; border:1px solid transparent; border-radius:999px;
            color:var(--botao-texto); background:var(--botao-fundo);
            font:800 14px/1.2 Roboto,Arial,sans-serif; text-decoration:none; text-align:center;
            cursor:pointer; user-select:none; transition:background .2s ease, border-color .2s ease, color .2s ease, filter .2s ease;
        }
        .btn:hover { background:var(--botao-hover); }
        .btn:focus-visible { outline:2px solid currentColor; outline-offset:3px; }

        /* ==================== CORES E ESTILOS ==================== */
        .btn-outline { color:var(--texto); border-color:var(--linha); background:var(--card-fundo); }
        .btn-outline:hover { background:var(--fundo-suave); }
        .btn-light { color:var(--base5); background:#fff; }
        .btn-light:hover { background:#fff; filter:brightness(.9); }
        .btn-dark { color:#fff; background:var(--base5); }
        .btn-dark:hover { background:var(--base5); filter:brightness(1.35); }
        .btn-outline-light { color:#fff; border-color:rgba(255,255,255,.4); background:transparent; }
        .btn-outline-light:hover { background:rgba(255,255,255,.12); }
        .btn-ghost { color:var(--texto); background:transparent; }
        .btn-ghost:hover { background:var(--fundo-suave); }

        /* ==================== TAMANHOS E ESTADOS ==================== */
        .btn-sm { min-height:34px; padding:0 14px; font-size:12px; }
        .btn-lg { min-height:56px; padding:0 30px; font-size:16px; }
        .btn-block { display:flex; width:100%; }
        .btn:disabled, .btn.is-disabled { opacity:.45; pointer-events:none; }

/* ==================== Campos ==================== */
        .campo {min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--campo-linha); border-radius:7px; color:var(--campo-texto); background:var(--campo-fundo); font:400 13px/1.4 Roboto,sans-serif}
        .campo::placeholder {color:var(--campo-placeholder)}
        .campo:focus-visible {outline:2px solid var(--link); outline-offset:3px}
        .campo:disabled {opacity:.6; cursor:not-allowed}

        /* ==================== FORMULÁRIO (APOIO) ==================== */
        .form-comum {display:grid; gap:16px; max-width:520px}
        .form-linha {display:grid; gap:6px}
        .form-linha > label {color:var(--titulo); font:600 13px/1.4 Roboto,sans-serif}
        .form-duplo {display:grid; grid-template-columns:1fr 1fr; gap:16px}
        .form-ajuda {color:var(--texto-suave); font:400 11px/1.4 Roboto,sans-serif}
        textarea.campo {min-height:110px; resize:vertical}
        .form-check {display:flex; align-items:center; gap:8px; color:var(--texto); font:400 13px/1.4 Roboto,sans-serif}
        .form-check input {width:16px; height:16px; accent-color:var(--botao-fundo)}

        /* ==================== BOTÃO ==================== */
        .btn-comum {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
        .btn-comum:hover {background:var(--botao-hover)}
        .btn-comum:focus-visible {outline:2px solid var(--link); outline-offset:3px}

        @media(max-width:620px) {.form-duplo {grid-template-columns:1fr}}

/* ==================== Cards ==================== */
/* CONJUNTO — AS COLUNAS SE AJUSTAM AO ESPAÇO */
.cards {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:20px}

/* ==================== 1. CARD — ESTRUTURA COMUM ==================== */
.card {min-width:0; overflow:hidden; border:1px solid var(--card-linha); border-radius:12px; color:var(--card-texto); background:var(--card-fundo); transition:transform .25s ease}
.card > a {display:flex; flex-direction:column; height:100%; color:inherit; text-decoration:none}
.card > a:hover {background:var(--fundo-suave)}
.card > a:focus-visible {outline:2px solid var(--link); outline-offset:-3px}
.card:not(:has(img)):hover {transform:translateY(-4px)}
.card .text {display:flex; flex-direction:column; flex:1; gap:5px; min-width:0; padding:20px; overflow-wrap:anywhere}
.card h3 {margin:0; color:var(--titulo); font:700 clamp(18px,2vw,22px)/1.3 Roboto,sans-serif}
.card p {margin:0; color:var(--texto-suave); font:400 14px/1.2 Roboto,sans-serif}
.card small {color:var(--link); font:700 12px/1.4 Roboto,sans-serif}
.card strong {margin-top:auto; color:var(--link); font:700 22px/1.3 Roboto,sans-serif}
.card img {display:block; max-width:100%; object-fit:cover; transition:transform .25s ease}
.card > a:hover > img {transform:scale(1.04)}

/* ==================== 2. CARD-IMG — IMAGEM ACIMA ==================== */
.card-img > a > img {width:100%; aspect-ratio:4/3}

/* ==================== 3. CARD-HORIZONTAL — IMAGEM AO LADO ==================== */
.card-horizontal > a {display:grid; grid-template-columns:35% minmax(0,1fr)}
.card-horizontal > a > img {width:100%; height:100%; min-height:180px}
.card-horizontal .text {padding:15px}

/* ==================== 4. CARD-ICON — ÍCONE E CONTEÚDO ==================== */
.card-icon .text > i {display:flex; align-items:center; justify-content:center; width:52px; height:52px; margin-bottom:5px; border-radius:10px; color:var(--botao-texto); background:var(--botao-fundo); font-size:26px}

/* ==================== 5. CARD-OVERLAY — TEXTO SOBRE A IMAGEM ==================== */
.card-overlay {background:var(--base5)}
.card-overlay > a {position:relative; isolation:isolate; min-height:380px}
.card-overlay > a > img {position:absolute; inset:0; width:100%; height:100%}
.card-overlay > a::after {content:""; position:absolute; inset:0; background:linear-gradient(to bottom,transparent 20%,rgba(0,0,0,.5) 60%,#000 100%); pointer-events:none}
.card-overlay strong {margin-top:0}
.card-overlay .text {position:relative; z-index:1; flex:1; justify-content:flex-end}
.card-overlay h3,.card-overlay p,.card-overlay small,.card-overlay strong {color:var(--base-texto)}

/* ==================== 6. CARD-CANAL — CANAIS DO CIDADÃO / FORMULÁRIOS DE REQUISIÇÕES ==================== */
.consulta-links {display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px}
.consulta-app {--campo-altura:34px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; text-align:center; gap:8px; padding:16px; border:1px solid var(--card-linha); border-radius:12px; color:var(--texto); background:var(--card-fundo); box-shadow:var(--card-sombra); text-decoration:none; overflow-wrap:anywhere; transition:border-color .2s ease, box-shadow .2s ease}
.consulta-app strong {color:var(--titulo); font:700 14px/1.3 Roboto,sans-serif}
.consulta-app strong i {margin-right:7px; color:var(--base3); font-size:1.05em}
.consulta-app span {padding-bottom:8px; color:var(--texto-suave); font:400 12px/1.5 Roboto,sans-serif}
.consulta-app .btn-comum {margin-top:auto; width:100%; padding:8px 14px; font:600 12px/1.4 Roboto,sans-serif}
.consulta-app .btn-comum:hover {background:var(--botao-fundo); box-shadow:0 6px 16px rgba(20,35,50,.22)}
.consulta-app > .btn-comum:last-child {margin-bottom:calc(var(--campo-altura) + 8px)}
.consulta-app .campo {flex:none; width:100%; min-height:0; height:var(--campo-altura); padding:7px 10px; font:400 12px/1.4 Roboto,sans-serif}
.consulta-app .campo:focus,.consulta-app .campo:active {outline:none}
.consulta-app .campo:focus-visible {outline:none; border-color:var(--base3)}

/* botão e campo usados no card */
.btn-comum {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
.btn-comum:hover {background:var(--botao-hover)}
.campo {min-width:0; min-height:42px; padding:10px 12px; border:1px solid var(--campo-linha); border-radius:7px; color:var(--campo-texto); background:var(--campo-fundo); font:400 13px/1.4 Roboto,sans-serif}
.campo::placeholder {color:var(--campo-placeholder)}

/* ==================== BOTÃO-CARD ==================== */
.btn-card {display:flex; align-items:center; gap:14px; min-height:78px; padding:17px; border:1px solid var(--card-linha); border-radius:12px; color:var(--card-texto); background:var(--card-fundo); text-decoration:none; transition:box-shadow .22s ease}
.btn-card i {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.btn-card strong {font:600 13px/1.4 Roboto,sans-serif}
.btn-card:hover {box-shadow:var(--card-sombra)}
.btn-card:focus-visible {outline:2px solid var(--link); outline-offset:3px}
@media (max-width:980px) {.consulta-links {grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px) {.consulta-links {grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==================== MOBILE ==================== */
@media (max-width:600px) {
    .card-horizontal > a {grid-template-columns:1fr}
    .card-horizontal > a > img {height:auto; min-height:0; aspect-ratio:4/3}
}

/* ==================== Efeitos ==================== */
.hover-ampliar {transition:box-shadow .22s ease}
.hover-ampliar:not(img):not(.acordion-links a):hover {box-shadow:var(--card-sombra)}
.hover-ampliar:focus-visible {outline:2px solid var(--link); outline-offset:3px}

.hover-links > a {transition:background-color .22s ease}
.hover-links > a:hover {--atalho-fundo:var(--fundo-suave); background:var(--fundo-suave)}

.sections-anime.anime-ativa {opacity:0; transform:translateY(22px); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1)}
.sections-anime.anime-ativa.anime-visivel {opacity:1; transform:none}
@media(prefers-reduced-motion:reduce) {
        .sections-anime.anime-ativa {opacity:1; transform:none; transition:none}
        .hover-ampliar, .hover-links > a {transition:none}
}

/* ==================== Grids ==================== */
        .grid-1,.grid-2,.grid-3,.grid-4 {display:grid; gap:12px; align-items:start}
        .grid-1 {grid-template-columns:1fr}
        .grid-2 {grid-template-columns:repeat(2,minmax(0,1fr))}
        .grid-3 {grid-template-columns:repeat(3,minmax(0,1fr))}
        .grid-4 {grid-template-columns:repeat(4,minmax(0,1fr))}
        .grid-centro {align-items:center}

        @media(max-width:900px) {.grid-2 {grid-template-columns:1fr} .grid-4 {grid-template-columns:repeat(2,minmax(0,1fr))}}
        @media(max-width:620px) {.grid-3,.grid-4 {grid-template-columns:1fr}}

/* ==================== Header ==================== */
/* Header do site (#header): faixa topo, barra principal, gavetas, busca overlay.
   Cores vêm do temas.css (--faixa-topo, --base1..base5, --header-*, --busca-*, --sidebar-*). */
#header                 {position:fixed;inset:0 0 auto;z-index:1000;font:400 14px/1.45 'Roboto',Arial,sans-serif;color:var(--header-texto)}
#header *,#header *::before,#header *::after {box-sizing:border-box}
#header button,#header input {font:inherit}
#header button          {cursor:pointer}
#header a               {text-decoration:none}
#header [hidden]        {display:none!important}

/* ---- faixa de cima ---- */
#header .header_topo    {position:relative;z-index:3;background-color:var(--base3);background-image:var(--faixa-topo);color:var(--base-texto)}
#header .header_topo .content {min-height:40px;display:flex;justify-content:flex-end;align-items:center;gap:5px}
#header .header_topo a,#header .header_topo button {display:inline-flex;align-items:center;justify-content:center;min-height:30px;padding:5px 9px;border:0;border-radius:6px;background:transparent;color:inherit}
#header .header_topo a:hover,#header .header_topo button:hover,#header .header_topo button[aria-expanded=true] {background:var(--header-topo-hover)}
#header .header_topo .header_drop > button {min-height:26px;padding:3px 7px;font-size:12px;font-weight:500}
#header .header_topo .header_icone {width:38px;min-height:36px;padding:5px;font-size:18px}
#header .header_topo .header_drop > button[aria-label="Acessibilidade"] {width:38px;min-height:36px;padding:5px;font-size:19px}

/* ---- dropdowns ---- */
#header .header_drop    {position:relative}
#header .header_drop_menu {position:absolute;right:0;top:100%;z-index:1200;min-width:180px;padding:6px;border:1px solid var(--header-linha);border-radius:9px;background:var(--header-fundo);box-shadow:var(--header-menu-sombra)}
#header .header_drop_menu a,#header .header_drop_menu button {display:flex;width:100%;justify-content:flex-start;gap:9px;white-space:nowrap;text-align:left;color:var(--header-texto);padding:9px 11px}
#header .header_drop_menu a:hover,#header .header_drop_menu button:hover {background:var(--header-hover)}

/* ---- barra principal ---- */
#header .header_barra   {position:relative;z-index:1;background:var(--header-fundo);border-bottom:1px solid var(--header-linha);box-shadow:var(--header-sombra)}
#header .header_barra .content {min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:20px}
#header .header_marca   {min-width:0;flex-shrink:0;display:flex;align-items:center;color:var(--header-texto)}
#header .header_marca img {display:block;width:auto;height:auto;max-width:min(360px,32vw);max-height:64px;object-fit:contain}
#header .header_marca .header_logo_dark {display:none}
html[data-theme="dark"] #header .header_marca .header_logo_light {display:none}
html[data-theme="dark"] #header .header_marca .header_logo_dark {display:block}
#header .header_nav     {display:flex;align-items:center;gap:6px;margin-left:auto}
#header .header_btn     {display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border:1px solid var(--header-linha);border-radius:8px;background:var(--header-suave);color:var(--header-texto);font-size:12px;font-weight:700;text-transform:uppercase;white-space:nowrap}
#header .header_btn i   {width:1em;flex:0 0 auto;color:var(--link);text-align:center}
#header .header_btn:hover,#header .header_btn[aria-expanded=true] {background:var(--header-hover)}
#header .header_acoes   {display:flex;align-items:center;gap:8px;margin-left:8px}
#header .header_acao    {display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--header-linha);border-radius:12px;background:var(--header-fundo);color:var(--header-texto);font-size:18px}
#header .header_acao:hover {background:var(--header-hover)}
#header .header_sol,html[data-theme="dark"] #header .header_lua {display:none}
html[data-theme="dark"] #header .header_sol {display:inline}
#header :focus-visible {outline:2px solid var(--link);outline-offset:2px}
#header .header_mobile_btn {display:none;width:42px;height:42px;padding:0;align-items:center;justify-content:center;border:1px solid var(--header-linha);border-radius:12px;background:var(--header-fundo);color:var(--header-texto);font-size:19px}
#header .header_mobile_btn i {width:1em;flex:0 0 auto;text-align:center}

/* ---- gavetas ---- */
#header .header_sidebar {position:fixed;top:0;bottom:0;left:0;z-index:1200;width:min(380px,100vw);padding:0 0 24px;background:var(--base5);color:var(--base-texto);box-shadow:var(--sidebar-sombra);overflow-y:auto;scrollbar-color:var(--base4) var(--base5);transform:translateX(-105%);visibility:hidden;transition:transform .4s ease,visibility 0s linear .4s}
#header .header_sidebar::-webkit-scrollbar {width:8px}
#header .header_sidebar::-webkit-scrollbar-track {background:var(--base5)}
#header .header_sidebar::-webkit-scrollbar-thumb {background:var(--base4);border-radius:999px}
#header .header_sidebar::-webkit-scrollbar-thumb:hover {background:var(--base3)}
#header .header_sidebar.ativa {transform:translateX(0);visibility:visible;transition:transform .4s ease,visibility 0s}
#header .header_sidebar_topo {position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:19px 20px;font-size:18px;font-weight:700}
#header .header_sidebar_topo,#header .header_sidebar_topo.ttsidebar {color:var(--base-texto);border-bottom:2px solid var(--base4);background:var(--base5);margin:0}
#header .header_sidebar_topo.ttsidebar::before {content:"\f009";font-family:"Font Awesome 6 Free";font-weight:900;font-size:16px;line-height:1}
#header .header_sidebar_fechar {width:34px;height:34px;margin-left:auto;border:0;border-radius:7px;background:var(--sidebar-suave);color:var(--base-texto)}
#header .header_sidebar_corpo {padding:20px}
#header .header_sidebar_atalho {display:block;margin-bottom:20px;padding:11px 14px;border-radius:8px;background:var(--base3);color:var(--base-texto);font-weight:700;text-align:center}
#header .header_sidebar_atalho:hover {filter:brightness(.92)}
#header .header_grupo {margin:0 0 18px}
.header_grupo_titulo {display:flex;align-items:center;justify-content:flex-start;gap:9px;margin:0 0 8px;padding:10px 12px;border:0;border-left:3px solid var(--link);border-radius:0 6px 6px 0;color:var(--texto);font:700 15px/1.4 Roboto,Arial,sans-serif;text-transform:none}
.header_grupo_titulo::before {content:none}
.header_grupo_titulo i {width:17px;margin-right:0;text-align:center}
#header .header_grupo_titulo,#header .header_grupo_titulo.ttsidebar {color:var(--base-texto);border-left-color:var(--base2);background:var(--sidebar-suave)}
#header .header_grupo_titulo i {color:var(--base-texto)}
#header .header_grupo a {display:block;padding:9px 11px;border-radius:6px;color:var(--base-texto)}
#header .header_grupo a:hover {background:var(--sidebar-hover)}
#header .header_acordeao {border-bottom:1px solid var(--sidebar-linha)}
#header .header_acordeao_botao {display:flex;align-items:center;gap:9px;width:100%;margin:8px 0;padding:12px;border:0;border-left:3px solid var(--base2);border-radius:0 6px 6px 0;background:var(--sidebar-suave);color:var(--base-texto);text-align:left;font:700 15px/1.4 Roboto,Arial,sans-serif}
#header .header_acordeao_botao:hover {background:var(--sidebar-hover)}
#header .header_seta {margin-left:auto;transition:transform .2s}
#header [aria-expanded=true] .header_seta {transform:rotate(180deg)}
#header .header_acordeao_painel {padding:0 0 14px 8px}
#header .header_acordeao_painel .header_grupo {margin:0 0 10px}



/* ---- responsivo ---- */
@media(max-width:1100px) {#header .header_nav {gap:3px}#header .header_btn {padding:9px;font-size:11px}}
@media(max-width:850px) {#header .header_nav {display:none}#header .header_mobile_btn {display:inline-flex}#header .header_barra .content {min-height:66px}#header .header_marca img {max-width:min(240px,45vw);max-height:48px}}
@media(max-width:550px) {#header .header_topo .content {justify-content:flex-end;padding:3px 12px}#header .header_topo .header_drop:first-child {display:none}#header .header_barra .content {padding:8px 12px}}
@media(prefers-reduced-motion:reduce) {#header .header_sidebar,#header .header_seta {transition:none}}

/* ==================== Indicadores ==================== */
        .indicadores {min-width:0}
        .indicadores h4 {margin:0 0 12px; padding-left:0; border-left:0; color:var(--texto); font-size:13px}
        .indicadores-ano {display:grid; grid-template-columns:50px 1fr; gap:12px; align-items:start; padding:8px 0; border-top:1px solid var(--linha)}
        .indicadores-valores {display:flex; flex-wrap:wrap; gap:7px 13px}
        .indicadores-valores span {color:var(--texto-suave); font-size:9px; overflow-wrap:anywhere}
        .indicadores-valores b {display:block; color:var(--texto); font-size:13px}
        .indicadores-barras {display:grid; gap:12px}
        .indicadores-cabecalho {display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; color:var(--texto-suave); font-size:10px}
        .indicadores-trilho {height:7px; overflow:hidden; border-radius:999px; background:var(--linha)}
        .indicadores-preenchimento {height:100%; border-radius:inherit; background:var(--base3)}

        /* ==================== GRID (APOIO) ==================== */
        .grid-2 {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:start}
        @media(max-width:900px) {.grid-2 {grid-template-columns:1fr}}

/* ==================== Menu ==================== */
/* Menu principal do site: barra flutuante (nav) com submenu no hover.
   Cores: --menu, --menuhov, --menusub, --menusubhov, --menusubfont, --menubutton... */
nav                             {background:transparent; float:right; font-size:90%; height:30px; text-decoration:none; position:absolute; z-index:999}
nav > ul > li > a               {color: var(--menu); padding:10px 12px 15px 12px; font:700 13px/13px "Lato", sans-serif; text-decoration:none; position:relative}
nav > ul > li > a::after        {content:''; position:absolute; bottom:8px; left:50%; width:0; height:2px; background: var(--menuhov); transition:width .3s ease, left .3s ease}
nav > ul > li:hover > a::after, nav > ul > li > a:hover::after {width:100%; left:0}
nav > ul > li                   {float:left; position:relative}
nav ul ul                       {position:absolute; right:auto; left:0; display:none; padding:12px 0; box-shadow:0 8px 20px rgba(0,0,0,0.15); border-radius:6px; margin-top:2px}
nav > ul > li:hover > ul        {display:block}
nav > ul > li:last-child:hover > ul {left:auto; right:0}
nav li:hover > ul > li          {height:32px}
nav ul ul li                    {background: var(--menusub); height:0}
nav ul ul li:hover              {background: var(--menusubhov)}
nav ul ul li a                  {height:30px; padding:0 12px; width:200px; font:700 12px/12px 'Roboto'; color: var(--menusubfont); text-decoration:none; display:flex; align-items:center; justify-content:flex-start}
nav ul ul li a:before           {content:"\f0da"; font-family:FontAwesome; margin-right:7px}
nav ul ul li:hover > a, nav ul ul li a:hover {color: var(--menusubfont)}
nav ul ul li:last-child > a, nav ul ul li.last-item > a {border-bottom:0}
nav, nav ul, nav ul li, nav ul li a, nav #head-mobile {border:0; list-style:none; line-height:1; display:block; position:relative; box-sizing:border-box}
nav:after, nav > ul:after       {content:"."; display:block; clear:both; visibility:hidden; line-height:0; height:0}
nav .only-desktop               {display:block}
nav > ul > li::after            {content:''; position:absolute; top:100%; left:0; width:100%; height:8px; background:transparent; z-index:998}
nav > ul > li.menu-button       {float:left; margin-left:30px}
nav > ul > li.menu-button a     {background:var(--menubutton); border: 1px solid var(--menubutbrd); color: var(--menubutfont); padding:10px 24px; border-radius:30px; font:700 14px/17px "Roboto"; text-decoration:none; transition:all .3s ease}
nav > ul > li.menu-button a:hover {background:var(--menubuthov); box-shadow:0 4px 10px rgba(0,0,0,0.2)}
nav > ul > li.menu-button > a::after {display:none}
nav > ul > li.menu-button > a:hover::after {display:none}

/* ==================== Modal ==================== */
/* ==================== BOTÃO (APOIO) ==================== */
        .btn-comum {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 13px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
        .btn-comum:hover {background:var(--botao-hover)}
        .btn-comum:focus-visible {outline:2px solid var(--link); outline-offset:3px}

        /* ==================== TIPO 1 — MODAL NATIVO (dialog) ==================== */
        .dialog-comum {width:min(680px,calc(100% - 30px)); max-width:calc(100% - 30px); max-height:90vh; padding:0; border:1px solid var(--linha); border-radius:14px; color:var(--modal-texto); background:var(--modal-fundo); box-shadow:var(--card-sombra)}
        .dialog-comum[open] {display:flex; flex-direction:column}
        .dialog-comum::backdrop {background:rgba(0,0,0,.55)}
        .dialog-topo {display:flex; flex:none; justify-content:space-between; align-items:center; gap:12px; padding:14px 24px; border-bottom:1px solid var(--linha)}
        .dialog-topo img {height:46px; width:auto}
        .dialog-topo form {margin:0}
        .dialog-fechar {width:38px; height:38px; border:0; border-radius:6px; color:var(--modal-texto); background:var(--fundo-destaque); font-size:26px; cursor:pointer}
        .dialog-fechar:focus-visible {outline:2px solid var(--link); outline-offset:3px}
        .dialog-scroll {overflow:auto; min-height:0; padding:24px}
        .dialog-scroll h3 {margin:0 0 18px; color:var(--titulo); font:600 22px/1.3 Roboto,sans-serif}
        .dialog-scroll p {margin:0 0 14px; color:var(--texto-suave)}
        .dialog-rodape {flex:none; padding:12px 24px; border-top:1px solid var(--linha); color:var(--texto-suave); font-size:12px; text-align:center}
        body.dialog-aberto {overflow:hidden}
        .lista-numeros {margin:0; padding:0; list-style:none}
        .lista-numeros li {display:flex; justify-content:space-between; gap:16px; padding:11px 0; border-bottom:1px solid var(--linha); font:400 13px/1.5 Roboto,sans-serif}
        .lista-numeros li:last-child {border:0}
        .lista-numeros li span {min-width:0; overflow-wrap:anywhere}
        .lista-numeros li strong {flex:none; color:var(--link)}

        /* ==================== TIPO 2 — MODAL DE DETALHES (app) ==================== */
        .app-modal-overlay {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.55); z-index:9999; align-items:center; justify-content:center}
        .app-modal-overlay.active {display:flex}
        .app-modal {background:#fff; border-radius:8px; width:90%; max-width:900px; max-height:88vh; overflow:hidden; box-shadow:0 8px 40px rgba(0,0,0,0.22); display:flex; flex-direction:column; scrollbar-width:thin; scrollbar-color:#c8cdd5 #f2f4f6}
        .app-modal::-webkit-scrollbar {width:10px; height:12px}
        .app-modal::-webkit-scrollbar-track {background:#f2f4f6; border-radius:10px}
        .app-modal::-webkit-scrollbar-thumb {background:#c8cdd5; border-radius:10px}
        .app-modal::-webkit-scrollbar-thumb:hover {background:#aab1ba}
        .app-modal-header {background:#1a6eb5; color:#fff; padding:16px 20px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0; border-radius:8px 8px 0 0}
        .app-modal-header h3 {margin:0; font-size:15px; font-weight:700; color:#fff}
        .app-modal-close {background:transparent; border:2px solid rgba(255,255,255,0.6); color:#fff; border-radius:50%; width:30px; height:30px; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center}
        .app-modal-close:hover {background:rgba(255,255,255,0.15)}
        .app-modal-body {padding:24px 24px 16px; flex:1; overflow-y:auto}
        .app-modal-body .objeto-texto {background:#f8f9fa; border-left:3px solid #1a6eb5; padding:10px 14px; border-radius:0 4px 4px 0; font-size:13px; color:#333; margin-top:4px; line-height:1.5}
        .app-modal-body .secao-titulo {font-size:13px; font-weight:700; color:#1a6eb5; text-transform:uppercase; margin:18px 0 10px; border-bottom:2px solid #e0eaf5; padding-bottom:5px}
        .app-modal-body .form-group {margin-bottom:14px}
        .app-modal-body .form-group label {display:block; font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:#888; padding-left:2px; margin-bottom:4px}
        .app-modal-body .form-control {height:auto; min-height:36px; padding:8px 12px; background:#f8f9fa; border:1px solid #e0e6ed; border-left:3px solid #1a6eb5; border-radius:4px; font-weight:600; color:#333}
        .app-modal-body .arquivo-item {display:flex; align-items:center; gap:10px; padding:9px 12px; border:1px solid #dee2e6; border-radius:5px; margin-bottom:7px; background:#f8f9fa; text-decoration:none; color:#333; transition:background 0.15s; cursor:pointer}
        .app-modal-body .arquivo-item:hover {background:#e8f0fb}
        .app-modal-body .arquivo-item .arq-icone {font-size:20px; color:#dc3545; flex-shrink:0}
        .app-modal-body .arquivo-item .arq-info {flex:1}
        .app-modal-body .arquivo-item .arq-nome {font-size:13px; font-weight:600; color:#1a6eb5; display:block}
        .app-modal-body .arquivo-item .arq-data {font-size:11px; color:#888; margin-top:1px; display:block}
        .app-modal-footer {padding:14px 24px; border-top:1px solid #e9ecef; display:flex; gap:10px; flex-wrap:wrap; flex-shrink:0; background:#fff; border-radius:0 0 8px 8px}
        .app-btn-imprimir {background:#6c757d; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px}
        .app-btn-imprimir:hover {background:#5a6268}
        .app-btn-salvar {background:#17a2b8; color:#fff; border:none; padding:8px 16px; border-radius:4px; cursor:pointer; font-size:13px; display:flex; align-items:center; gap:6px}
        .app-btn-salvar:hover {background:#138496}
        .app-btn-fechar {background:#fff; color:#555; border:1px solid #ced4da; padding:8px 16px; border-radius:4px; cursor:pointer; font-size:13px; margin-left:auto}
        .app-btn-fechar:hover {background:#f0f0f0}
        @media(max-width:600px) {.app-modal {width:98%}}

/* ==================== Página ==================== */
/* Base do layout do site: fundo, container, conteúdo e caixas. */
body {background:var(--fundo); color:var(--texto); min-height:100vh; overflow-x:hidden; margin:0; padding:0; font-family:'Roboto',sans-serif}
html {background:var(--fundo); color:var(--texto); min-height:100%; overflow-y:scroll; scrollbar-gutter:stable; margin:0; padding:0; font:400 95% 'Lato',sans-serif}
input:focus, select:focus, button:focus, textarea:focus, img:focus {outline:0}
.container {max-width:1920px; background:var(--fundo); color:var(--texto); margin:0 auto; overflow:visible; min-height:100%}
.content {max-width:1300px; margin:0 auto; overflow:visible; padding:0 10px}
.content-pages {background:var(--content-pages); color:var(--texto); position:relative; border-radius:30px; z-index:1; flex:1; width:100%; max-width:1300px; margin:-25px auto 40px; padding:30px}
.content-trans {max-width:1300px; background:var(--content-pages); min-height:100vh; border-radius:20px; display:flex; flex-direction:column; margin:0 auto; overflow:visible}
.box {background:var(--fundo-suave); border:1px solid var(--linha); padding:30px; border-radius:20px; overflow:hidden}
.border {border:1px solid var(--linha); padding:22px; border-radius:16px; overflow:clip}
.box-pag {background:var(--boxbkg); border:1px solid var(--boxbor); padding:25px; border-radius:30px; overflow:hidden; box-shadow:-1px -1px 20px 11px rgba(0,0,0,0.15)}
.pag-views {padding:0 40px}
@media(max-width:992px) {.content-pages {margin-top:-15px; padding:20px}}
@media(max-width:992px) {.box-pag {background:none; border:0; padding:0; border-radius:0; box-shadow:none}}
@media(max-width:992px) {.desktop-footer {display:none} .mobile-footer {display:block}}
@media(max-width:769px) {
    .mobile {display: none}
    .desktop {display:block}
    p {font-size:100%; line-height:140%}
    .border {padding:10px; border-radius:5px}
}
@media(max-width:600px) {div.aside-pag {display:none}}

/* ==================== Sidebar ==================== */
/* Gaveta lateral legada: entra com .active; dentro dela, acordeão e listas de links.
   Cores: --sidebarbkg, --sidefont, --sidebot, --sidebarbut, --asicol*... */
/* ---- estrutura ---- */
.sidebar                {background: var(--sidebarbkg); width: 350px; height: 100vh; padding: 15px; transform: translateX(-100%); position: absolute; left: 0; top: 0; transition: transform 0.8s ease, opacity 2s ease, visibility 8s ease; z-index: 10000; overflow-y: scroll; opacity: 0; visibility: hidden;}
.sidebar.active         {transform: translateX(0); opacity: 1; visibility: visible; transition: transform 0.8s ease;}
.sidebar-header         {color: var(--sidefont); border-bottom: 1px dotted var(--sidebot); font: 700 20px/15px "Montserrat"; margin-top:15px; padding:0 15px; display: flex; justify-content: space-between; align-items: center; line-height:2}
.sidebar .close-btn     {background: none; border: none; color: #fff; font-size: 20px; cursor: pointer}
.sidebar-button a       {background-color:var(--sidebarbut); color:var(--sidebutfont); border:1px solid var(--sidebutbor); font: 700 15px/20px "Roboto"; padding: 10px 20px; border-radius:20px; cursor: pointer; transition: background-color 0.3s ease}
.sidebar-button a:hover {background-color: var(--sidebuthov)}
@media (max-width: 500px) {.sidebar {width:100%}}

/* ---- acordeão interno ---- */
.accordion-title        {background-color: var(--asideacortit); color: var(--asiacorfont); font: 700 16px/13px "Lato"; cursor: pointer; padding:15px; margin-bottom: 5px; display: flex; align-items: center}
.accordion-title i      {font-size: 14px; margin-right: 10px; line-height: inherit}
.accordion-content      {max-height: 0; overflow: hidden; transition: max-height 0.5s ease}
.accordion-content.open {max-height: 400px}

/* ---- listas de links ---- */
.asidebarcol a          {background: var(--asidebarcol); font: 400 13px/17px "Tahoma", sans-serif; color:var(--asicolfont); padding: 8px 20px; border-bottom: dotted 0px var(--asibarcolbot); display:block; align-items: center; overflow: hidden; letter-spacing: 1px}
.asidebarcol a::before  {content: "\f0da"; font-family: FontAwesome; margin-right: 10px; position: relative; left: 0; transition: left 0.3s ease}
.asidebarcol a:hover    {background: var(--asicolhov)}
.asidebarcol-ttb        {width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid var(--asicoltta); margin-left: 15px; margin-top: -5px;}
.asidebarcol-ttaa {border:1px solid var(--asicoltta); display:flex;align-items:center;justify-content:center;text-align:center;font:700 16px/19px "Lato";color:var(--asicolfont);margin-bottom:20px;padding:12px;text-transform:uppercase;letter-spacing:1px;}
.asidebar-menu          {background: var(--asidebarmenu); font: 700 13px/13px "Lato"; color: var(--asimenufont); margin-bottom:5px; text-transform: uppercase; letter-spacing: 1px}
.asidebar-menu a        {background: var(--asidebarmenu); color:var(--asicolfont); padding: 15px; display: block; align-items: center; overflow: hidden; letter-spacing: 1px; cursor: pointer; text-decoration: none}
.asidebar-menu a:hover  {background: var(--asimenuhov)}

/* ---- scrollbar da gaveta ---- */
.sidebar::-webkit-scrollbar {width: 6px}
.sidebar::-webkit-scrollbar-track {background-color:var(--sibarscrolbkg)}
.sidebar::-webkit-scrollbar-thumb {background-color:var(--siscrolmov); border-radius: 10px;}
.sidebar::-webkit-scrollbar-thumb:hover {background-color:var(--siscrolhov)}

/* ==================== Tabelas ==================== */
        .tabela-wrap {overflow:auto}
        .tabela {width:100%; border-collapse:collapse; color:var(--texto)}
        .tabela th {padding:14px 16px; color:var(--texto-suave); text-align:left; font:700 11px/1.4 Roboto,sans-serif; text-transform:uppercase}
        .tabela td {padding:16px; border-top:1px solid var(--linha); font:400 13px/1.5 Roboto,sans-serif; vertical-align:top}
        .tabela .tabela-vazio {text-align:center; color:var(--texto-suave)}

        /* Mobile: cada linha vira um cartão, o cabeçalho some e o data-label aparece. */
        @media(max-width:620px) {
            .tabela,.tabela tbody {display:block}
            .tabela thead {display:none}
            .tabela tr {display:block; margin-bottom:12px; padding:8px 12px; border:1px solid var(--linha); border-radius:8px; background:var(--card-fundo)}
            .tabela td {display:grid; grid-template-columns:minmax(80px,105px) minmax(0,1fr); gap:10px; padding:9px 0; overflow-wrap:anywhere}
            .tabela td:first-child {border:0}
            .tabela td:before {content:attr(data-label); color:var(--texto-suave); font-size:10px; text-transform:uppercase}
            .tabela td.tabela-vazio {display:block}
            .tabela td.tabela-vazio:before {content:none}
        }

/* ==================== Títulos ==================== */
/* ==================== TTA-TAG ==================== */
.tta-tag {margin-bottom:24px; padding-bottom:12px; border-bottom:1px dotted var(--link)}
.tta-tag-rotulo {margin:0 0 6px; padding-left:9px; border-left:4px solid var(--link); color:var(--link); font:700 12px/1.5 "Roboto",sans-serif; letter-spacing:0.08em; text-transform:uppercase}
.tta-tag-title {margin:0; color:var(--link); font:800 min(28px, calc(20.8px + 0.6vw))/1.2 "Roboto",sans-serif; letter-spacing:-0.02em}
.tta-tag-bt {display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:16px}
.tta-tag a.btn {display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border:1px solid var(--botao-fundo); border-radius:6px; background:var(--botao-fundo); color:var(--botao-texto); font:600 14px/1.4 "Roboto",sans-serif; text-decoration:none; box-shadow:none; transition:background-color .2s,border-color .2s}
.tta-tag a.btn:hover,.tta-tag a.btn:focus {background:var(--botao-hover); border-color:var(--botao-hover); color:var(--botao-texto); text-decoration:none; box-shadow:none}

/* ==================== TTA E TTB ==================== */
.tta,.ttb {display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; width:100%; color:var(--link); border-bottom:1px solid var(--link); gap:12px; padding-bottom:8px; margin-bottom:20px}
.tta {border-bottom-width:3px; padding-bottom:12px; margin-bottom:40px}
.tta h2,.ttb h2 {display:flex; align-items:center; gap:8px; margin:0; color:inherit; font:500 20px/1.2 Roboto,sans-serif}
.tta h2 {font-size:28px}
.tta > a,.tta > button,.ttb > a,.ttb > button {display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 12px; border:0; border-radius:7px; color:var(--botao-texto); background:var(--botao-fundo); font:700 12px/1.4 Roboto,sans-serif; text-decoration:none; text-align:center; cursor:pointer; transition:background-color .22s ease}
.tta > a:hover,.tta > button:hover,.ttb > a:hover,.ttb > button:hover {background:var(--botao-hover)}
.tta > a:focus-visible,.tta > button:focus-visible,.ttb > a:focus-visible,.ttb > button:focus-visible {outline:2px solid var(--link); outline-offset:3px}

/* ==================== RÓTULO ==================== */
.ttrotulo {display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; color:var(--link); font:700 12px/1.4 Roboto,sans-serif; letter-spacing:.12em; text-transform:uppercase}
.ttrotulo:before {content:""; width:3px; height:17px; background:currentColor}

/* ==================== TÍTULO GRANDE ==================== */
.ttmax {margin:0; max-width:780px; color:var(--titulo); font:500 clamp(30px,4.2vw,58px)/1.1 Roboto,sans-serif; letter-spacing:-.035em}

/* ==================== CABEÇALHO COM ÍCONE — TÍTULO E COMENTÁRIO ==================== */
.acordion-cabecalho {display:flex; align-items:center; gap:14px; padding:18px; border-bottom:1px solid var(--linha)}
.acordion-titulo {min-width:0; flex:1}
.acordion-titulo h3 {margin:0 0 4px; color:var(--titulo); font:600 17px/1.35 Roboto,sans-serif}
.acordion-cabecalho .icone-box {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.acordion-cabecalho .texto-suave {display:block; color:var(--texto-suave); font:400 12px/1.45 Roboto,sans-serif}

/* ==================== Utilitários ==================== */
.texto-suave {display:block; color:var(--texto-suave); font:400 12px/1.45 Roboto,sans-serif}
.icone-box {width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:9px; color:var(--botao-texto); background:var(--botao-fundo)}
.icone-box svg {width:22px; height:22px}
[hidden] {display:none!important}
.btn-comum:focus-visible,.campo:focus-visible,.acordion-light > summary:focus-visible,.acordion-links a:focus-visible {outline:2px solid var(--link); outline-offset:3px}

/* ==================== BUSCA (overlay) ==================== */
body.busca-aberta {overflow:hidden}
.busca_overlay {position:fixed;inset:0;z-index:1400;display:flex;justify-content:center;align-items:flex-start;padding:11vh 20px 24px;background:var(--busca-fundo);backdrop-filter:blur(14px);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility 0s linear .25s}
.busca_overlay.aberta {visibility:visible;opacity:1;pointer-events:auto;transition:opacity .25s ease,visibility 0s}
.busca_overlay_caixa {width:min(920px,100%);color:var(--busca-texto)}
.busca_overlay_topo {display:flow-root}
.busca_overlay_topo h2 {margin:0 0 22px;font-size:clamp(30px,4.4vw,52px);line-height:1.1;letter-spacing:-.02em;color:var(--busca-texto)}
.busca_overlay_fechar {float:right;width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--busca-linha-suave);border-radius:50%;background:transparent;color:var(--busca-texto);font-size:18px;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.busca_overlay_fechar:hover {background:rgba(255,255,255,.08);border-color:var(--busca-suave)}
.busca_overlay_form {display:flex;align-items:center;gap:14px;padding:7px 7px 7px 22px;border:1px solid var(--busca-linha);border-radius:999px;background:rgba(255,255,255,.06);transition:border-color .2s ease,background .2s ease}
.busca_overlay_form:focus-within {border-color:var(--busca-destaque);background:rgba(255,255,255,.1)}
.busca_overlay_form input[type=search] {flex:1;min-width:0;padding:13px 0;border:0;outline:0;background:transparent;color:var(--busca-texto);font:400 19px/1.3 Roboto,Arial,sans-serif}
.busca_overlay_form input[type=search]::-webkit-search-cancel-button {filter:invert(1)}
.busca_overlay_form input[type=search]::placeholder {color:var(--busca-suave)}
.busca_overlay_form button {width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border:0;border-radius:50%;background:var(--busca-destaque);color:#062033;font-size:19px;cursor:pointer;transition:transform .2s ease,filter .2s ease}
.busca_overlay_form button:hover {transform:scale(1.06);filter:brightness(1.08)}
.busca_overlay_dica {margin:16px 0 0;color:var(--busca-suave);font-size:13px}
.busca_overlay_opcoes {display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.busca_overlay_opcoes a {display:inline-flex;align-items:center;gap:10px;padding:11px 17px;border:1px solid var(--busca-linha-suave);border-radius:999px;color:var(--busca-suave);font:500 13px/1 Roboto,Arial,sans-serif;text-decoration:none;transition:border-color .2s ease,color .2s ease,background .2s ease,transform .2s ease}
.busca_overlay_opcoes a i {color:var(--busca-destaque);font-size:14px}
.busca_overlay_opcoes a:hover {transform:translateY(-2px);border-color:var(--busca-destaque);background:rgba(255,255,255,.07);color:var(--busca-texto)}
@media(max-width:550px) {.busca_overlay {padding:8vh 14px 20px}.busca_overlay_form {padding-left:16px}.busca_overlay_form input[type=search] {font-size:17px}.busca_overlay_opcoes a {padding:10px 14px;font-size:12px}}
@media(prefers-reduced-motion:reduce) {.busca_overlay_opcoes a,.busca_overlay_form button {transition:none}}