/* =========================================================================
   Portal IPREM — o que o Design System ainda não tinha.
   -------------------------------------------------------------------------
   Nada de valor fixo aqui: tudo lê os mesmos tokens que o ds.css, então
   trocar o tema no painel também troca estas peças. São três acréscimos:

     · a barra de acessibilidade do e-MAG e o alto contraste;
     · o registro de publicações, que é uma lista pautada de atos oficiais
       e não uma grade de cartões;
     · o bloco de anexos, que é o que o cidadão vem buscar.
   ========================================================================= */

/* Escala tipográfica controlada pelos botões A+/A−. Em rem, tudo acompanha. */
html { font-size: calc(100% * var(--ds-escala, 1)); }

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

/* ── Atalhos de teclado ─────────────────────────────────────────────────── */

.ds-skip a {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--ds-color-ink);
    color: var(--ds-color-on-ink);
    padding: .75rem 1.25rem;
    font-weight: 600;
    text-decoration: none;
}
.ds-skip a:focus { left: 0; }

/* ── Barra de acessibilidade ────────────────────────────────────────────── */

.ds-acess {
    background: var(--ds-color-ink);
    color: var(--ds-color-on-ink);
    font-size: .82rem;
}
.ds-acess__barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    min-height: 2.25rem;
    padding-block: .35rem;
}
.ds-acess__orgao { margin-right: auto; }
.ds-acess__grupo { display: flex; flex-wrap: wrap; gap: .35rem; margin-left: auto; }

.ds-acess__btn {
    background: transparent;
    color: inherit;
    border: var(--ds-border-w) solid rgba(255, 255, 255, .30);
    border-radius: var(--ds-radius-sm);
    padding: .15rem .6rem;
    font: inherit;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--ds-dur) var(--ds-ease), color var(--ds-dur) var(--ds-ease);
}
.ds-acess__btn:hover,
.ds-acess__btn:focus-visible,
.ds-acess__btn[aria-pressed="true"] {
    background: var(--ds-color-on-ink);
    color: var(--ds-color-ink);
}

/* ── Cabeçalho do portal ────────────────────────────────────────────────── */

/* O cabeçalho do design system nasceu fixo no topo, para um site de uma
   página só com hero escuro atrás. Num portal .gov ele não pode ser fixo:
   a barra de acessibilidade tem de ser o primeiro conteúdo da página e o
   cabeçalho estava passando por cima dela. Aqui ele vira grudento — rola
   junto até encostar no topo — e a barra sobe normalmente. */
.ds-header {
    position: sticky;
    inset: auto;
    top: 0;
}
.ds-header-spacer { display: none; }

/* Duas faixas: marca e busca em cima, navegação embaixo. Um portal tem mais
   itens de menu do que cabe ao lado de uma marca de duas linhas. */
.ds-header .ds-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
        "marca busca menu"
        "nav   nav   nav";
    align-items: center;
    gap: .4rem var(--ds-space-5);
    height: auto;
    min-height: var(--ds-header-h);
    padding-block: .55rem;
}
.ds-brand  { grid-area: marca; display: grid; gap: .1rem; line-height: 1.15; }
.ds-busca  { grid-area: busca; }
.ds-burger { grid-area: menu; margin-left: 0; }
.ds-nav    { grid-area: nav; margin-left: 0; flex-wrap: wrap; row-gap: .1rem; }

.ds-brand { display: inline-flex; align-items: center; gap: .7rem; }
.ds-brand__texto { display: inline-block; }

/* O logotipo acompanha a altura do cabeçalho sem esticar: largura automática
   e um teto, para um arquivo muito largo não empurrar o menu.

   A altura é a única alavanca; o teto de largura sai dela por proporção. Com
   dois números soltos, mexer num e esquecer o outro achata ou libera a marca
   sem que ninguém perceba. A escala escolhida no painel vira
   --ds-brand-logo-h no cabeçalho, e o valor aqui é o padrão de quem ainda
   não escolheu. */
.ds-brand__logo {
    height: var(--ds-brand-logo-h, 2.6rem);
    width: auto;
    max-width: calc(var(--ds-brand-logo-h, 2.6rem) * 4.2);
    object-fit: contain;
    flex-shrink: 0;
}

/* Escalas do painel (app/config/logo.php). O celular recebe um degrau mais
   contido: a mesma altura que dá presença no desktop come a linha inteira
   numa tela de 360px, e empurra a busca para fora da primeira dobra. */
.ds-header[data-logo-escala="discreto"] { --ds-brand-logo-h: 2.1rem; }
.ds-header[data-logo-escala="normal"]   { --ds-brand-logo-h: 2.6rem; }
.ds-header[data-logo-escala="grande"]   { --ds-brand-logo-h: 3.4rem; }
.ds-header[data-logo-escala="destaque"] { --ds-brand-logo-h: 4.2rem; }

@media (max-width: 575.98px) {
    .ds-brand__logo { height: var(--ds-brand-logo-h, 2.1rem); }
    .ds-header[data-logo-escala="discreto"] { --ds-brand-logo-h: 1.8rem; }
    .ds-header[data-logo-escala="normal"]   { --ds-brand-logo-h: 2.1rem; }
    .ds-header[data-logo-escala="grande"]   { --ds-brand-logo-h: 2.6rem; }
    .ds-header[data-logo-escala="destaque"] { --ds-brand-logo-h: 3.1rem; }
}

.ds-brand__sub {
    display: block;
    font-family: var(--ds-font-body);
    font-size: .72rem;
    font-weight: 400;
    letter-spacing: 0;
    opacity: .82;
    max-width: 44ch;
}

/* Cabeçalho sólido com texto claro: é o que o token header.on_dark pede, e
   sem isto o "sempre" ficava sem efeito no modo sólido — texto claro sobre
   fundo branco. */
body[data-ds-header="solid"][data-ds-header-ondark="sempre"] .ds-header {
    background: var(--ds-color-ink);
    color: var(--ds-color-on-ink);
    border-bottom-color: color-mix(in srgb, var(--ds-color-on-ink) 22%, transparent);
}
body[data-ds-header="solid"][data-ds-header-ondark="sempre"] .ds-header .ds-suspenso {
    background: var(--ds-color-surface);
    color: var(--ds-color-text);
}

/* Ao rolar, o design system clareia o cabeçalho — faz sentido quando ele
   começa transparente sobre um hero. Aqui ele já nasce sólido e escuro, e
   piscar para branco no primeiro giro da roda é desconcertante. */
body[data-ds-header="solid"][data-ds-header-ondark="sempre"] .ds-header.is-stuck {
    background: var(--ds-color-ink);
    color: var(--ds-color-on-ink);
    box-shadow: 0 8px 24px -16px rgba(0, 0, 0, .55);
}
body[data-ds-header="solid"][data-ds-header-ondark="sempre"] .ds-header.is-stuck .ds-brand,
body[data-ds-header="solid"][data-ds-header-ondark="sempre"] .ds-header.is-stuck .ds-nav__link {
    color: var(--ds-color-on-ink);
}
body[data-ds-header="solid"][data-ds-header-ondark="sempre"] .ds-header.is-stuck .ds-btn--outline {
    border-color: color-mix(in srgb, var(--ds-color-on-ink) 45%, transparent);
    color: var(--ds-color-on-ink);
}

/* Rótulo do grupo: só existe na folha do celular, onde o botão que carrega
   esse nome está escondido e o submenu fica sempre aberto. No desktop o
   display:none o remove também da árvore de acessibilidade, então o leitor de
   tela não ouve o nome duas vezes. */
.ds-nav__rotulo { display: none; }

@media (max-width: 991.98px) {
    .ds-nav__rotulo {
        display: block;
        padding-block: var(--ds-space-4) var(--ds-space-2);
        font-weight: 700;
        font-size: var(--ds-text-sm);
        letter-spacing: .04em;
        text-transform: uppercase;
        opacity: .7;
    }
}

.ds-busca { display: flex; gap: .4rem; align-items: center; }
.ds-busca .ds-input { min-width: 14rem; }
.ds-busca .ds-btn { flex: none; }

@media (max-width: 991.98px) {
    /* No celular a busca desce para uma faixa própria e continua visível sem
       abrir o menu: no portal, buscar é a ação mais comum. */
    .ds-header .ds-shell {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "marca menu"
            "busca busca";
    }
    .ds-busca { width: 100%; }
    .ds-busca .ds-input { flex: 1; min-width: 0; }
    .ds-brand__sub { max-width: 28ch; }
    /* A folha do menu abre abaixo do cabeçalho inteiro, cuja altura o
       portal.js publica em --ds-header-total. */
    .ds-nav { position: fixed; inset: var(--ds-header-total, var(--ds-header-h)) 0 0 0; }
}

/* ── Entrada do logotipo ────────────────────────────────────────────────
   Uma animação só, no topo, quando a página abre. É gesto de boas-vindas,
   não decoração recorrente: nada mais na página se move sozinho.

   O atraso existe para a marca entrar depois que a página assentou; o
   fill-mode "both" segura o estado inicial durante esse tempo, senão a marca
   apareceria, sumiria e voltaria.                                          */

@keyframes ds-entrada-descer {
    from { opacity: 0; transform: translate3d(0, -120%, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes ds-entrada-esmaecer {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ds-entrada {
    animation-duration: 1.1s;
    animation-delay: .35s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

.ds-entrada--descer   { animation-name: ds-entrada-descer; }
.ds-entrada--esmaecer { animation-name: ds-entrada-esmaecer; animation-duration: .9s; }

/* A marca é um link: a animação não pode deixá-la inalcançável enquanto
   corre, nem esconder o foco de quem chega pelo teclado. */
.ds-entrada:focus-visible { animation: none; opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .ds-entrada { animation: none !important; opacity: 1; transform: none; }
}

/* ── Registro de publicações ────────────────────────────────────────────── */

.ds-registro {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 2px solid var(--ds-color-text);
}

.ds-registro__item {
    display: grid;
    grid-template-columns: 4.25rem 1fr auto;
    gap: 1.25rem;
    align-items: start;
    padding: 1.1rem .25rem;
    border-bottom: var(--ds-border-w) solid var(--ds-color-rule);
}
.ds-registro__item:hover { background: var(--ds-color-paper); }

.ds-registro__ano {
    font-family: var(--ds-font-heading);
    font-weight: var(--ds-heading-weight);
    font-size: 1rem;
    text-align: center;
    padding: .3rem 0;
    border-radius: var(--ds-radius-sm);
    background: var(--ds-color-brand);
    color: var(--ds-color-on-brand);
}
.ds-registro__ano--vazio {
    background: transparent;
    color: var(--ds-color-text-muted);
    border: var(--ds-border-w) solid var(--ds-color-rule);
}

.ds-registro__titulo {
    font-family: var(--ds-font-heading);
    font-size: 1.05rem;
    font-weight: 500;
    line-height: var(--ds-leading-snug);
    margin: 0 0 .3rem;
    max-width: var(--ds-measure-normal);
}
.ds-registro__titulo a { color: var(--ds-color-text); text-decoration: none; }
.ds-registro__titulo a:hover,
.ds-registro__titulo a:focus-visible { color: var(--ds-color-brand-text); text-decoration: underline; }

.ds-registro__resumo {
    margin: 0 0 .4rem;
    color: var(--ds-color-text-muted);
    font-size: .92rem;
    max-width: var(--ds-measure-normal);
}

.ds-registro__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin: 0;
    font-size: .82rem;
    color: var(--ds-color-text-muted);
}

/* Verde = existe arquivo. Em nenhum outro lugar do portal. */
.ds-registro__selo {
    align-self: center;
    white-space: nowrap;
    color: var(--ds-color-signal);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
}
.ds-registro__selo::before { content: "◆ "; }
.ds-registro__selo:hover { text-decoration: underline; }

@media (max-width: 640px) {
    .ds-registro__item { grid-template-columns: 3.4rem 1fr; gap: .85rem; }
    .ds-registro__selo { grid-column: 2; align-self: start; }
}

/* ── Anexos ─────────────────────────────────────────────────────────────── */

.ds-anexos {
    border: 2px solid var(--ds-color-signal);
    border-radius: var(--ds-radius-md);
    overflow: hidden;
    margin-block: var(--ds-block-gap);
}
.ds-anexos__head {
    margin: 0;
    background: var(--ds-color-signal);
    color: #fff;
    padding: .6rem 1.1rem;
    font-family: var(--ds-font-heading);
    font-size: 1rem;
    font-weight: 500;
}

.ds-anexo {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .85rem 1.1rem;
    border-bottom: var(--ds-border-w) solid var(--ds-color-rule);
    text-decoration: none;
    color: var(--ds-color-text);
}
.ds-anexo:last-child { border-bottom: 0; }
.ds-anexo:hover, .ds-anexo:focus-visible { background: var(--ds-color-paper); }
.ds-anexo__nome { flex: 1; min-width: 0; }
.ds-anexo__nome strong { display: block; font-weight: 600; font-size: .95rem; word-break: break-word; }
.ds-anexo__nome small  { color: var(--ds-color-text-muted); }
.ds-anexo__acao { color: var(--ds-color-signal); font-weight: 600; white-space: nowrap; }

/* ── Publicação ─────────────────────────────────────────────────────────── */

.ds-aviso-sem-texto {
    background: var(--ds-color-paper);
    border-left: 4px solid var(--ds-color-brand);
    border-radius: var(--ds-radius-sm);
    padding: .9rem 1.1rem;
    color: var(--ds-color-text-muted);
}

.ds-vizinhas {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-top: var(--ds-block-gap);
}
.ds-vizinha {
    border: var(--ds-border-w) solid var(--ds-color-rule);
    border-radius: var(--ds-radius-md);
    padding: .85rem 1rem;
    text-decoration: none;
    color: var(--ds-color-text);
}
.ds-vizinha:hover { border-color: var(--ds-color-brand); }
.ds-vizinha small { display: block; color: var(--ds-color-text-muted); margin-bottom: .2rem; }

/* ── Telefones ──────────────────────────────────────────────────────────── */

.ds-telefones { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.ds-telefone {
    border: var(--ds-border-w) solid var(--ds-color-rule);
    border-radius: var(--ds-radius-md);
    padding: 1rem 1.15rem;
}
.ds-telefone h2 { font-size: 1rem; margin: 0 0 .5rem; }
.ds-telefone a  { display: block; font-size: 1.1rem; font-weight: 600; text-decoration: none; }
.ds-telefone small { color: var(--ds-color-text-muted); }

/* ── Prévia de PDF ──────────────────────────────────────────────────────
   Desenha a capa do documento no lugar da foto decorativa. O papel tem
   proporção A4 e fica reservado antes do desenho, então a página não pula
   quando a prévia termina de carregar.                                    */

.ds-pdfprev { margin: 0; }

.ds-pdfprev__papel {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1.414;              /* A4 em retrato */
    overflow: hidden;
    background: var(--ds-color-surface);
    border: var(--ds-border-w) solid var(--ds-color-rule);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-raised);
    text-decoration: none;
    transition: border-color var(--ds-dur) var(--ds-ease),
                box-shadow var(--ds-dur) var(--ds-ease);
}
.ds-pdfprev__papel:hover,
.ds-pdfprev__papel:focus-visible {
    border-color: var(--ds-color-signal);
    box-shadow: var(--ds-shadow-lifted);
}

.ds-pdfprev__canvas { display: block; width: 100%; height: auto; }

/* Enquanto não há desenho, o papel mostra o rótulo "PDF" no verde que, neste
   portal, sempre quer dizer "existe documento". */
.ds-pdfprev__estado {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--ds-font-mono);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--ds-color-signal);
    background: var(--ds-color-paper);
}
.ds-pdfprev__estado:empty { display: none; }
.ds-pdfprev__estado--erro {
    color: var(--ds-color-text-muted);
    font-family: var(--ds-font-body);
    font-weight: 400;
    letter-spacing: 0;
    font-size: .85rem;
    text-align: center;
    padding: 1rem;
}

.ds-pdfprev__legenda {
    margin-top: .6rem;
    font-size: .85rem;
    line-height: var(--ds-leading-snug);
}
.ds-pdfprev__legenda a { color: var(--ds-color-text); font-weight: 600; text-decoration: none; }
.ds-pdfprev__legenda a:hover { color: var(--ds-color-brand-text); text-decoration: underline; }
.ds-pdfprev__legenda small { display: block; color: var(--ds-color-text-muted); }

/* Miniatura: a mesma peça ao lado de cada anexo da lista. */
.ds-pdfprev--miniatura { width: 4.5rem; flex-shrink: 0; }
.ds-pdfprev--miniatura .ds-pdfprev__papel { border-radius: var(--ds-radius-sm); box-shadow: none; }
.ds-pdfprev--miniatura .ds-pdfprev__estado { font-size: .7rem; }
.ds-pdfprev--miniatura .ds-pdfprev__legenda { display: none; }

/* O bloco de anexos passa a ter miniatura, então a linha cresce um pouco. */
.ds-anexo { align-items: center; }
.ds-anexo .ds-pdfprev--miniatura { margin: 0; }

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

/* ── Carrossel ──────────────────────────────────────────────────────────
   Sem JavaScript é uma tira com rolagem lateral, alcançável pelo teclado.
   O script acrescenta .ds-carrossel--ativo e ela vira um slider de um slide
   por vez. A altura é reservada pela proporção, então a página não pula
   quando a primeira imagem carrega.                                        */

.ds-carrossel { position: relative; margin-bottom: var(--ds-space-6); }

.ds-carrossel__palco { position: relative; overflow: hidden; }

.ds-carrossel__trilho {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(92%, 62rem);
    gap: var(--ds-space-4);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: var(--ds-space-3);
}

.ds-carrossel__slide {
    position: relative;
    scroll-snap-align: center;
    border-radius: var(--ds-radius-lg);
    overflow: hidden;
    background: var(--ds-color-ink);
}

/* Um slide só: não há tira, porque não há vizinho para espiar.
   A largura de 62rem acima existe para o slide seguinte aparecer pela borda e
   a tira se anunciar como tira. Com um slide, o script não vira slider (não há
   para onde navegar) e essa mesma largura vira um recorte de 992px com espaço
   morto ao lado — que é exatamente o contrário do banner de largura total que
   se espera da home. Aqui ele ocupa o quadro inteiro, sem cantos arredondados,
   porque encostado nas bordas da tela o arredondado revela o fundo da página. */
.ds-carrossel[data-slides="1"] .ds-carrossel__trilho {
    grid-auto-columns: 100%;
    gap: 0;
    overflow-x: hidden;
    padding-bottom: 0;
}
.ds-carrossel[data-slides="1"] .ds-carrossel__slide { border-radius: 0; }

/* O quadro guarda a proporção e recorta a imagem. Fica separado do slide
   porque a faixa de texto, quando escolhida, precisa ficar fora dele — se a
   proporção estivesse no slide, a faixa entraria no cálculo e a imagem
   encolheria a cada linha de texto. */
.ds-carrossel__quadro {
    position: relative;
    aspect-ratio: var(--carrossel-proporcao, 21 / 9);
    /* Em modo pixels, a altura definida é o teto: o quadro acompanha a
       largura da tela até chegar nela e para de crescer. */
    max-height: var(--carrossel-altura-max, none);
    min-height: 16rem;
    overflow: hidden;
}

.ds-carrossel__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* O texto do slide fica sobre a imagem: o escurecimento garante o
       contraste mínimo independentemente da foto que o editor subir. */
    filter: brightness(.55);
}

/* ── Texto sobreposto ────────────────────────────────────────────────────
   Vale para o texto do slide e para a camada de identificação. O véu não é
   enfeite: o texto é branco sobre foto arbitrária, e sem ele não há garantia
   de contraste. Por isso cada âncora traz o seu.                           */

.ds-carrossel__texto,
.ds-carrossel__identificacao {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--ds-space-6);
    color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, var(--carrossel-veu, .72)), transparent);
}

.ds-carrossel__identificacao { z-index: 3; padding-inline: 0; }
.ds-carrossel__identificacao .ds-carrossel__titulo { margin-bottom: .35rem; }
.ds-carrossel__identificacao .ds-carrossel__lead { margin-bottom: 0; }

/* Topo: o degradê desce da borda de cima. */
.ds-carrossel[data-posicao-texto="topo"] .ds-carrossel__texto,
.ds-carrossel[data-posicao-texto="topo"] .ds-carrossel__identificacao {
    inset: 0 0 auto 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, var(--carrossel-veu, .72)), transparent);
}

/* Centro: o véu cobre a imagem inteira, porque o texto fica no meio dela. */
.ds-carrossel[data-posicao-texto="centro"] .ds-carrossel__texto,
.ds-carrossel[data-posicao-texto="centro"] .ds-carrossel__identificacao {
    inset: 0;
    display: grid;
    align-content: center;
    background: rgba(0, 0, 0, var(--carrossel-veu, .5));
}

/* A faixa sai de cima da imagem: vira bloco em fluxo, com as cores do tema.
   Aqui não há véu nem texto branco — o fundo é sólido. */
.ds-carrossel[data-texto-slide="faixa"] .ds-carrossel__texto {
    position: static;
    inset: auto;
    display: block;
    padding: var(--ds-space-5) var(--ds-space-6);
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border-top: var(--ds-border-w) solid var(--ds-color-rule);
}
/* Restritas ao bloco de texto do slide, de propósito. Sem o
   `.ds-carrossel__texto` no meio, estas regras — mais específicas do que as
   da camada sobreposta — pintavam também o título do portal com a cor de
   texto do tema, ignorando a cor escolhida no painel. */
.ds-carrossel[data-texto-slide="faixa"] .ds-carrossel__texto .ds-carrossel__titulo {
    color: var(--ds-color-text);
}
.ds-carrossel[data-texto-slide="faixa"] .ds-carrossel__texto .ds-carrossel__lead {
    color: var(--ds-color-text-muted);
}
.ds-carrossel__titulo {
    color: #fff;
    margin: 0 0 .4rem;
    font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
    text-wrap: balance;
}
.ds-carrossel__lead {
    color: #EDF1FA;
    margin: 0 0 var(--ds-space-4);
    max-width: 52ch;
}
.ds-carrossel__texto .ds-btn { margin-top: .2rem; }

/* ── Ajuste da imagem no quadro ─────────────────────────────────────────
   Duas decisões do editor, no painel:

   cobrir  a imagem preenche o quadro e o que sobra é cortado. O ponto de
           foco escolhe que parte sobrevive ao corte — importante quando há
           rosto ou brasão perto de uma borda.
   conter  a imagem aparece inteira. O espaço que sobra recebe uma cópia
           desfocada dela mesma, em vez de tarja vazia: o quadro fica cheio
           sem inventar cor que não é da identidade.                       */

.ds-carrossel[data-proporcao="21-9"] { --carrossel-proporcao: 21 / 9; }
.ds-carrossel[data-proporcao="16-9"] { --carrossel-proporcao: 16 / 9; }
.ds-carrossel[data-proporcao="3-2"]  { --carrossel-proporcao: 3 / 2; }
.ds-carrossel[data-proporcao="4-3"]  { --carrossel-proporcao: 4 / 3; }

.ds-carrossel[data-ajuste="conter"] .ds-carrossel__img {
    object-fit: contain;
    position: relative;
    z-index: 1;
    /* Sem escurecimento aqui: a imagem inteira é o ponto, e o texto ganha o
       seu próprio degradê. */
    filter: none;
}

.ds-carrossel__fundo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A escala esconde a borda translúcida que o desfoque cria. */
    transform: scale(1.12);
    filter: blur(1.5rem) brightness(.5) saturate(1.2);
    z-index: 0;
}

.ds-carrossel[data-ajuste="conter"] .ds-carrossel__texto {
    z-index: 2;
    background: linear-gradient(to top, rgba(0, 0, 0, .8), rgba(0, 0, 0, .35) 60%, transparent);
}
.ds-carrossel[data-ajuste="conter"][data-texto-slide="faixa"] .ds-carrossel__texto {
    background: var(--ds-color-surface);
}

/* Ponto de foco: só muda alguma coisa quando a imagem é cortada. */
.ds-carrossel[data-foco="topo"]     .ds-carrossel__img { object-position: center top; }
.ds-carrossel[data-foco="base"]     .ds-carrossel__img { object-position: center bottom; }
.ds-carrossel[data-foco="esquerda"] .ds-carrossel__img { object-position: left center; }
.ds-carrossel[data-foco="direita"]  .ds-carrossel__img { object-position: right center; }

/* ── Tipografia do título sobreposto ─────────────────────────────────────
   Escolhida no painel. Só o que o editor mudou vira custom property; o resto
   continua herdando do tema, então trocar o tema ainda muda este texto.

   O tamanho é escala, não medida fixa: cada degrau é um clamp() cujo primeiro
   valor vale no celular e o segundo no desktop. Uma altura em px ficaria boa
   no monitor e estouraria o quadro na tela estreita.                        */

.ds-carrossel__identificacao .ds-carrossel__titulo {
    font-family: var(--id-fonte, var(--ds-font-heading));
    color: var(--id-cor, #fff);
}
.ds-carrossel__identificacao .ds-carrossel__lead {
    font-family: var(--id-fonte, inherit);
    /* Sem cor própria, acompanha o título; sem nenhuma das duas, o azul
       claro do tema, que é mais suave do que o branco puro. */
    color: var(--id-cor-lead, var(--id-cor, #EDF1FA));
}

/* Piso de legibilidade em todos os degraus: o menor valor nunca desce abaixo
   de 1,1rem, porque o público do portal é majoritariamente aposentado. */
.ds-carrossel__identificacao[data-tamanho="discreto"] .ds-carrossel__titulo {
    font-size: clamp(1.1rem, .95rem + .9vw, 1.6rem);
}
.ds-carrossel__identificacao[data-tamanho="normal"] .ds-carrossel__titulo {
    font-size: clamp(1.3rem, 1rem + 1.6vw, 2.1rem);
}
.ds-carrossel__identificacao[data-tamanho="grande"] .ds-carrossel__titulo {
    font-size: clamp(1.6rem, 1.1rem + 2.4vw, 3rem);
}
.ds-carrossel__identificacao[data-tamanho="enorme"] .ds-carrossel__titulo {
    font-size: clamp(2rem, 1.3rem + 3.4vw, 4rem);
}

.ds-carrossel__identificacao[data-tamanho="discreto"] .ds-carrossel__lead { font-size: .92rem; }
.ds-carrossel__identificacao[data-tamanho="grande"]   .ds-carrossel__lead { font-size: 1.1rem; }
.ds-carrossel__identificacao[data-tamanho="enorme"]   .ds-carrossel__lead { font-size: 1.25rem; }

.ds-carrossel__identificacao[data-peso="normal"] .ds-carrossel__titulo { font-weight: 400; }
.ds-carrossel__identificacao[data-peso="medio"]  .ds-carrossel__titulo { font-weight: 600; }
.ds-carrossel__identificacao[data-peso="forte"]  .ds-carrossel__titulo { font-weight: 800; }

.ds-carrossel__identificacao[data-alinhamento="centro"]  { text-align: center; }
.ds-carrossel__identificacao[data-alinhamento="direita"] { text-align: right; }
.ds-carrossel__identificacao[data-alinhamento="centro"]  .ds-carrossel__lead { margin-inline: auto; }
.ds-carrossel__identificacao[data-alinhamento="direita"] .ds-carrossel__lead { margin-inline-start: auto; }

/* ── Destaque do texto sobre a foto ─────────────────────────────────────
   O véu escurece a imagem inteira sob o texto; estes efeitos agem no texto,
   e servem quando escurecer mais a foto apagaria a própria foto.

   `--id-avesso` é a polaridade oposta à da cor do texto, calculada no
   servidor pela luminância (Texto::corClara). É o que faz halo e painel
   aparecerem atrás do texto e não em cima dele, sem pedir ao editor duas
   escolhas que precisam combinar.                                          */

.ds-carrossel__identificacao[data-efeito-texto="sombra"] .ds-carrossel__titulo,
.ds-carrossel__identificacao[data-efeito-texto="sombra"] .ds-carrossel__lead {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

.ds-carrossel__identificacao[data-efeito-texto="sombra_forte"] .ds-carrossel__titulo,
.ds-carrossel__identificacao[data-efeito-texto="sombra_forte"] .ds-carrossel__lead {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .85), 0 1px 2px rgba(0, 0, 0, .9);
}

/* Halo, não contorno traçado: um traço de espessura fixa engrossa e fecha os
   vãos das fontes finas do catálogo, enquanto o halo acompanha a letra. */
.ds-carrossel__identificacao[data-efeito-texto="contorno"] .ds-carrossel__titulo,
.ds-carrossel__identificacao[data-efeito-texto="contorno"] .ds-carrossel__lead {
    text-shadow:
        0 0 .10em rgba(var(--id-avesso, 0, 0, 0), .95),
        0 0 .30em rgba(var(--id-avesso, 0, 0, 0), .85);
}

/* Vidro: painel translúcido atrás do texto.
   A opacidade de .58 não é gosto: abaixo de .54 o pior caso — o painel sobre
   a foto da cor oposta — cai dos 4,5:1 da WCAG. O desfoque é só aparência e
   não conta como contraste; ele mistura a foto, não a escurece. Por isso a
   opacidade é a mesma com e sem backdrop-filter, e onde o navegador não tem
   o recurso o painel continua legível, apenas sem o vidro fosco. */
.ds-carrossel__identificacao[data-efeito-texto="vidro"] .ds-shell {
    padding: var(--ds-space-5) var(--ds-space-6);
    border-radius: var(--ds-radius-lg, .75rem);
    background: rgba(var(--id-avesso, 0, 0, 0), .58);
    border: var(--ds-border-w) solid rgba(var(--id-avesso, 0, 0, 0), .22);
    -webkit-backdrop-filter: blur(14px) saturate(130%);
    backdrop-filter: blur(14px) saturate(130%);
}

/* O painel já escurece o que está atrás dele; somar o degradê escureceria a
   foto duas vezes. Precisa passar das âncoras de topo e centro, que são mais
   específicas do que a regra base do véu. */
.ds-carrossel[data-posicao-texto] .ds-carrossel__identificacao[data-efeito-texto="vidro"] {
    background: none;
}

/* Quem pediu menos transparência no sistema operacional costuma tê-lo feito
   porque o fundo vazando atrapalha a leitura — a preferência da pessoa vence
   a do editor, como no resto do carrossel. */
@media (prefers-reduced-transparency: reduce) {
    .ds-carrossel__identificacao[data-efeito-texto="vidro"]:not([data-vidro-sempre]) .ds-shell {
        /* Preto puro deixava um buraco no meio da foto. A preferência pede
           opacidade, não ausência de desenho: o painel fica sólido na cor do
           tema, que é o mesmo azul do cabeçalho, e mantém borda e cantos. */
        background: var(--ds-color-ink, #14213D);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    .ds-carrossel__identificacao[data-polaridade="clara"][data-efeito-texto="vidro"]:not([data-vidro-sempre]) .ds-shell {
        /* Texto escuro pede painel claro; o azul do tema o engoliria. */
        background: var(--ds-color-surface, #fff);
    }
}

/* Caixa alta pede entreletra: sem ela as maiúsculas se amontoam. */
.ds-carrossel__identificacao[data-caixa="maiusculas"] .ds-carrossel__titulo {
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* No alto contraste a escolha do editor cede: o preto e o amarelo do e-MAG
   existem justamente para quem não enxerga a combinação escolhida. */
[data-ds-contraste="alto"] .ds-carrossel__identificacao .ds-carrossel__titulo,
[data-ds-contraste="alto"] .ds-carrossel__identificacao .ds-carrossel__lead {
    color: #fff !important;
}

/* ── Com JavaScript: um slide por vez ───────────────────────────────── */

.ds-carrossel--ativo .ds-carrossel__trilho {
    display: block;
    overflow: visible;
    padding-bottom: 0;
    position: relative;
}
.ds-carrossel--ativo .ds-carrossel__slide { width: 100%; }

/* Deslizar: os slides ficam lado a lado e o trilho anda. */
.ds-carrossel--ativo[data-efeito="deslizar"] .ds-carrossel__trilho {
    display: flex;
    transition: transform var(--ds-dur-lenta, .5s) var(--ds-ease);
}
.ds-carrossel--ativo[data-efeito="deslizar"] .ds-carrossel__slide {
    flex: 0 0 100%;
}

/* Esmaecer e sem efeito: os slides ficam empilhados. */
.ds-carrossel--ativo[data-efeito="esmaecer"] .ds-carrossel__slide,
.ds-carrossel--ativo[data-efeito="nenhum"] .ds-carrossel__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
}
.ds-carrossel--ativo[data-efeito="esmaecer"] .ds-carrossel__slide[data-atual],
.ds-carrossel--ativo[data-efeito="nenhum"] .ds-carrossel__slide[data-atual] {
    opacity: 1;
    visibility: visible;
    position: relative;
}
.ds-carrossel--ativo[data-efeito="esmaecer"] .ds-carrossel__slide {
    transition: opacity var(--ds-dur-lenta, .5s) var(--ds-ease),
                visibility var(--ds-dur-lenta, .5s);
}

/* ── Controles ──────────────────────────────────────────────────────── */

.ds-carrossel__controles {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    margin-top: var(--ds-space-3);
}

.ds-carrossel__seta {
    display: grid;
    place-items: center;
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0 .6rem;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--ds-color-text);
    background: var(--ds-color-surface);
    border: var(--ds-border-w) solid var(--ds-color-rule);
    border-radius: var(--ds-radius-sm);
    cursor: pointer;
}
.ds-carrossel__seta:hover,
.ds-carrossel__seta:focus-visible {
    border-color: var(--ds-color-brand);
    color: var(--ds-color-brand-text);
}

.ds-carrossel__pontos { display: flex; gap: .35rem; align-items: center; }

.ds-carrossel__ponto {
    /* A área de toque é de 2,5rem, mas o ponto desenhado é pequeno: alvo
       confortável sem poluir a barra. */
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    position: relative;
}
.ds-carrossel__ponto::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    width: .6rem;
    height: .6rem;
    border-radius: 50%;
    background: var(--ds-color-rule);
    transition: background var(--ds-dur) var(--ds-ease),
                transform var(--ds-dur) var(--ds-ease);
}
.ds-carrossel__ponto[aria-current="true"]::after {
    background: var(--ds-color-brand);
    transform: translate(-50%, -50%) scale(1.5);
}

@media (max-width: 575.98px) {
    .ds-carrossel__slide { aspect-ratio: 4 / 3; min-height: 13rem; }
    .ds-carrossel__texto { padding: var(--ds-space-4); }
}

/* Quem pediu menos movimento não recebe transição nenhuma; o JavaScript
   também não liga a troca automática nesse caso. */
@media (prefers-reduced-motion: reduce) {
    .ds-carrossel--ativo .ds-carrossel__trilho,
    .ds-carrossel--ativo .ds-carrossel__slide { transition: none !important; }
}

/* =========================================================================
   Alto contraste (e-MAG): fundo preto, texto branco, links amarelos.
   Redefine os tokens — nenhum componente precisa saber que este modo existe.
   ========================================================================= */

[data-ds-contraste="alto"] {
    --ds-color-ink:        #000000;
    --ds-color-brand:      #FFD400;
    --ds-color-brand-text: #FFD400;
    --ds-color-on-brand:   #000000;
    --ds-color-signal:     #FFD400;
    --ds-color-paper:      #0D0D0D;
    --ds-color-surface:    #000000;
    --ds-color-text:       #FFFFFF;
    --ds-color-text-muted: #E6E6E6;
    --ds-color-on-ink:     #FFFFFF;
    --ds-color-rule:       #8C8C8C;
    --ds-shadow-raised:    none;
    --ds-shadow-lifted:    none;
}
[data-ds-contraste="alto"] body,
[data-ds-contraste="alto"] .ds-field--paper,
[data-ds-contraste="alto"] .ds-field--surface,
[data-ds-contraste="alto"] .ds-card,
[data-ds-contraste="alto"] .ds-input { background: #000 !important; color: #fff !important; }
[data-ds-contraste="alto"] a,
[data-ds-contraste="alto"] .ds-nav__link { color: #FFD400 !important; }
[data-ds-contraste="alto"] .ds-anexos__head,
[data-ds-contraste="alto"] .ds-registro__ano { background: #FFD400 !important; color: #000 !important; }
[data-ds-contraste="alto"] img,
[data-ds-contraste="alto"] .ds-pdfprev__canvas { filter: grayscale(1) contrast(1.15); }
[data-ds-contraste="alto"] .ds-pdfprev__papel { background: #fff; }
[data-ds-contraste="alto"] .ds-carrossel__img { filter: grayscale(1) brightness(.35); }
[data-ds-contraste="alto"] .ds-carrossel__fundo { filter: grayscale(1) blur(1.5rem) brightness(.2); }
[data-ds-contraste="alto"] .ds-carrossel__texto,
[data-ds-contraste="alto"] .ds-carrossel__identificacao { background: #000; color: #fff; }
/* Sobra do efeito de vidro: sem isto a camada ficaria sem fundo no alto
   contraste, porque a regra que suprime o véu é mais específica. */
[data-ds-contraste="alto"] .ds-carrossel[data-posicao-texto]
    .ds-carrossel__identificacao[data-efeito-texto="vidro"] { background: #000; }
[data-ds-contraste="alto"] .ds-carrossel__identificacao[data-efeito-texto="vidro"] .ds-shell {
    background: #000;
    border-color: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Sombra e halo desenham cinzas intermediários, que é exatamente o que o
   alto contraste existe para eliminar. */
[data-ds-contraste="alto"] .ds-carrossel__identificacao .ds-carrossel__titulo,
[data-ds-contraste="alto"] .ds-carrossel__identificacao .ds-carrossel__lead {
    text-shadow: none;
}
[data-ds-contraste="alto"] .ds-carrossel[data-texto-slide="faixa"] .ds-carrossel__texto {
    border-top-color: #8C8C8C;
}
[data-ds-contraste="alto"] .ds-carrossel__ponto[aria-current="true"]::after { background: #FFD400; }
[data-ds-contraste="alto"] .ds-pdfprev__estado { background: #000; color: #FFD400; }

@media print {
    .ds-acess, .ds-skip, .ds-header, .ds-header-spacer,
    .ds-footer, .ds-nav__busca, [vw] { display: none !important; }
    .ds-anexo__acao::after { content: " — " attr(href); font-size: .8em; }

    /* No papel não há foto por baixo: sombra e desfoque só sujam a letra. */
    .ds-carrossel__identificacao .ds-carrossel__titulo,
    .ds-carrossel__identificacao .ds-carrossel__lead { text-shadow: none !important; }
    .ds-carrossel__identificacao[data-efeito-texto="vidro"] .ds-shell {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* ── Ouvidoria ──────────────────────────────────────────────────────────── */

.ds-ouvidoria { max-width: 48rem; }
.ds-campo { margin-bottom: var(--ds-space-5); }
.ds-campo fieldset,
fieldset.ds-campo { border: 0; padding: 0; margin-inline: 0; }
.ds-ajuda {
    margin: .4rem 0 0;
    font-size: var(--ds-text-sm);
    color: var(--ds-color-text-muted);
    max-width: 62ch;
}

/* Escolha do tipo: alvo grande, porque muita gente aqui usa o dedo e tem
   mais de 60 anos. Cada opção é um retângulo inteiro clicável. */
.ds-opcoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.ds-opcao {
    display: inline-flex; align-items: center; gap: .6rem;
    min-height: var(--ds-tap);
    padding: .55rem .9rem;
    border: var(--ds-border-w) solid var(--ds-color-rule);
    border-radius: var(--ds-radius-md);
    cursor: pointer;
    background: var(--ds-color-surface);
}
.ds-opcao:hover { border-color: var(--ds-color-brand); }
.ds-opcao:has(input:checked) {
    border-color: var(--ds-color-brand);
    box-shadow: inset 0 0 0 1px var(--ds-color-brand);
}
.ds-opcao:has(input:focus-visible) {
    outline: var(--ds-focus-w) solid var(--ds-color-brand);
    outline-offset: 2px;
}
.ds-opcao--solta { border-style: dashed; }
.ds-opcao input { width: 1.1rem; height: 1.1rem; accent-color: var(--ds-color-brand); }

/* Identificação some quando a pessoa escolhe o anonimato. Sem JavaScript
   ela continua visível — e o servidor ignora o que vier. */
.ds-identificacao[hidden] { display: none; }

/* Comprovante */
.ds-recibo { margin: var(--ds-space-5) 0; display: grid; gap: 0; }
.ds-recibo__linha {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--ds-space-4);
    padding: var(--ds-space-3) 0;
    border-top: var(--ds-border-w) solid var(--ds-color-rule);
}
.ds-recibo__linha:last-child { border-bottom: var(--ds-border-w) solid var(--ds-color-rule); }
.ds-recibo dt { color: var(--ds-color-text-muted); font-size: var(--ds-text-sm); margin: 0; }
.ds-recibo dd { margin: 0; }
.ds-recibo__codigo {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-text-lg);
    letter-spacing: .02em;
    word-break: break-all;
}
.ds-acoes-recibo { display: flex; flex-wrap: wrap; gap: var(--ds-space-4); align-items: center; }
@media (max-width: 575.98px) {
    .ds-recibo__linha { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* Acompanhamento */
.ds-acompanha {
    margin-top: var(--ds-space-7);
    padding-top: var(--ds-space-5);
    border-top: 2px solid var(--ds-color-rule);
}
.ds-acompanha__topo {
    display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: var(--ds-space-3);
}
.ds-acompanha__topo h2 { margin: 0; }
.ds-acompanha__texto { white-space: pre-line; max-width: 66ch; }
.ds-acompanha__resposta {
    border-left: 3px solid var(--ds-color-signal);
    padding-left: var(--ds-space-4);
}

@media print {
    /* O comprovante precisa sair no papel: é o que muita gente vai guardar. */
    .ds-acoes-recibo, .ds-alerta--aviso { display: none !important; }
    .ds-recibo__codigo { font-size: 1.1rem; }
}