/* Página pública do Hotsite (page_detail.html): acabamento dos blocos.
   Referência visual: Design System do gov.br (cores, sombras, foco e espaçamentos). */

.pagina-hotsite,
.pagina-hotsite__bloco-texto {
    --pagina-hotsite-destaque: #1351b4;
    --pagina-hotsite-destaque-claro: #dbe8fb;
    --pagina-hotsite-texto: #333;
    --pagina-hotsite-texto-suave: #555;
    --pagina-hotsite-borda: #ccc;
    --pagina-hotsite-foco: #c2850c;
    --pagina-hotsite-sombra-sm: 0 1px 6px rgba(0, 0, 0, 0.16);
    --pagina-hotsite-sombra-md: 0 3px 6px rgba(0, 0, 0, 0.16);
    --pagina-hotsite-sombra-lg: 0 6px 12px rgba(0, 0, 0, 0.16);
}

.pagina-hotsite__coluna {
    display: flex;
    flex-direction: column;
}

/* Banner ao lado de outro bloco (ex.: formulário): o Bootstrap já estica as
   colunas da linha pra terem a mesma altura (align-items: stretch, padrão do
   `.row`); aqui o banner passa a aproveitar essa altura, em vez de só respeitar
   o tamanho natural da imagem, cobrindo o espaço sem distorcer
   (object-fit: cover, recorta ao invés de esticar/achatar a imagem).
   Quando o banner é o único bloco da linha, não há altura "esticada" pra
   preencher — a imagem volta sozinha ao tamanho natural, sem precisar de
   nenhuma opção extra no editor. */
.pagina-hotsite__coluna > .pagina-hotsite__banner {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

.pagina-hotsite__coluna > .pagina-hotsite__banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Banner em tela cheia: faixa no formato pedido no cadastro do banner (962 x 154),
   com teto de altura; a imagem cobre a faixa e corta as sobras em cima e embaixo,
   em vez de crescer junto com a largura da tela. */
.pagina-hotsite__coluna > .pagina-hotsite__banner--tela-cheia img {
    height: auto;
    aspect-ratio: 962 / 154;
    max-height: 320px;
    object-fit: cover;
    object-position: center;
}

/* Fundo das linhas e banner em tela cheia usam 100vw, que no Windows inclui a
   barra de rolagem: sobravam uns pixels e a página rolava para os lados. "clip"
   corta essa sobra sem mexer na rolagem vertical (diferente de "hidden"). */
html {
    overflow-x: clip;
}

/* Banner em tela cheia (bloco de 12 colunas marcado no editor): sai da largura
   do container e ocupa a viewport inteira, centralizado. */
.pagina-hotsite__banner--tela-cheia {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
}

/* Cor de fundo da linha (editor de layout): Fundo com a trasnsição suave na tela */
.pagina-hotsite__linha-fundo--ativo {
    --pagina-hotsite-fundo-transicao: 3rem;
    --pagina-hotsite-fundo-topo: transparent;
    --pagina-hotsite-fundo-base: transparent;
    position: relative;
    z-index: 0;
    padding: 3rem 0 2.5rem;
    /* Sem margem aqui: o espaço embaixo vem só da regra abaixo (linha colorida
       seguida de linha sem cor); linhas coloridas seguidas ficam coladas. */
}

.pagina-hotsite__linha-fundo--une-acima {
    --pagina-hotsite-fundo-topo: var(--bt-cor-clara);
    padding-top: 1rem;
}

.pagina-hotsite__linha-fundo--une-abaixo {
    --pagina-hotsite-fundo-base: var(--bt-cor-clara);
    padding-bottom: 1rem;
    margin-bottom: 0;
}

/* Respiro só quando a linha de baixo NÃO tem cor também — entre duas linhas
   coloridas seguidas, elas ficam coladas (sem faixa branca entre uma cor e
   a outra). Com cor seguida de conteúdo normal, mantém o espaço de sempre. */
.pagina-hotsite__linha-fundo--ativo:not(:has(+ .pagina-hotsite__linha-fundo--ativo)) {
    margin-bottom: 1.5rem;
}

/* Banner em tela cheia (ponta a ponta) encostando numa linha colorida ao
   lado: sem faixa branca entre os dois — a cor começa exatamente onde a
   imagem termina, nos dois sentidos (banner antes ou depois da cor).
   O !important é necessário pra sobrepor o `.mb-4` do Bootstrap/govbr, que
   já vem com !important no próprio framework. */
.pagina-hotsite__linha-fundo:has(.pagina-hotsite__banner--tela-cheia):has(+ .pagina-hotsite__linha-fundo--ativo) .pagina-hotsite__linha {
    margin-bottom: 0 !important;
}

.pagina-hotsite__linha-fundo--ativo:has(+ .pagina-hotsite__linha-fundo .pagina-hotsite__banner--tela-cheia) {
    margin-bottom: 0 !important;
}

.pagina-hotsite__linha-fundo--ativo::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: linear-gradient(
        to bottom,
        var(--pagina-hotsite-fundo-topo) 0,
        var(--bt-cor-clara) var(--pagina-hotsite-fundo-transicao),
        var(--bt-cor-clara) calc(100% - var(--pagina-hotsite-fundo-transicao)),
        var(--pagina-hotsite-fundo-base) 100%
    );
    border-radius: 0;
    z-index: -1;
}

.pagina-hotsite__linha-fundo--ativo .pagina-hotsite__linha {
    margin-bottom: 0;
}

.pagina-hotsite__bloco-texto-corpo > :last-child {
    margin-bottom: 0;
}

/* Cabeçalho opcional da linha (Editor de layout: "Mostrar o título da linha na
   página"): chamada e título acima dos blocos. */
.pagina-hotsite__linha-cabecalho {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    margin: 0.5rem 0 1.5rem;
    color: var(--pagina-hotsite-texto);
}

/* Link opcional ao lado do título da linha ("Mais notícias"). */
.pagina-hotsite__linha-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding-bottom: 0.25rem;
    color: var(--pagina-hotsite-destaque);
    font-weight: 600;
    text-decoration: none;
}

.pagina-hotsite__linha-link:hover {
    color: var(--pagina-hotsite-destaque);
    text-decoration: underline;
}

.pagina-hotsite__linha-link .fa-chevron-right {
    font-size: 0.75rem;
    transition: transform 0.15s ease;
}

.pagina-hotsite__linha-link:hover .fa-chevron-right {
    transform: translateX(0.125rem);
}

.pagina-hotsite__linha-chamada {
    margin: 0 0 0.25rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 0.9375rem;
    font-weight: 700;
}

.pagina-hotsite__linha-titulo {
    margin: 0;
    padding: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
}

/* ---------------------------------------------------------------------------
   Notícia em formato de card (bloco "Notícia" e bloco "Últimas notícias" do
   PD 8): imagem, título, linha fina, data e "Leia mais". O link do título
   cobre o card inteiro.
   --------------------------------------------------------------------------- */
.pagina-hotsite__coluna > .pagina-hotsite__noticia {
    flex: 1 1 auto;
}

.pagina-hotsite__noticia {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    container-type: inline-size;
    color: var(--pagina-hotsite-texto);
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: var(--pagina-hotsite-sombra-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pagina-hotsite__noticia:hover,
.pagina-hotsite__noticia:focus-within {
    box-shadow: var(--pagina-hotsite-sombra-lg);
    transform: translateY(-2px);
}

.pagina-hotsite__noticia-interior {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.pagina-hotsite__noticia-imagem {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: var(--pagina-hotsite-destaque);
    font-size: 2rem;
    background: var(--pagina-hotsite-destaque-claro);
}

/* Fora do fluxo: a proporção 16:9 é da moldura, não da foto enviada. */
.pagina-hotsite__noticia-imagem img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pagina-hotsite__noticia-corpo {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1rem;
}

.pagina-hotsite__noticia-retranca {
    margin: 0 0 0.25rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pagina-hotsite__noticia-titulo {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.35;
}

.pagina-hotsite__noticia-titulo a {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* O link do título se estende por todo o card. */
.pagina-hotsite__noticia-titulo a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
}

.pagina-hotsite__noticia-titulo a:focus-visible {
    outline: none;
}

.pagina-hotsite__noticia-titulo a:focus-visible::after {
    outline: 2px dashed var(--pagina-hotsite-foco);
    outline-offset: -4px;
}

.pagina-hotsite__noticia-resumo {
    display: -webkit-box;
    margin: 0 0 0.75rem;
    overflow: hidden;
    color: var(--pagina-hotsite-texto-suave);
    font-size: 0.9375rem;
    line-height: 1.45;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.pagina-hotsite__noticia-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    color: var(--pagina-hotsite-texto-suave);
    font-size: 0.8125rem;
}

.pagina-hotsite__noticia-rodape time i {
    margin-right: 0.375rem;
}

.pagina-hotsite__noticia-leia-mais {
    margin-left: auto;
    color: var(--pagina-hotsite-destaque);
    font-weight: 600;
    white-space: nowrap;
}

.pagina-hotsite__noticia-leia-mais i {
    font-size: 0.6875rem;
}

/* Card largo (uma notícia sozinha em coluna larga): em vez de uma foto
   gigante em cima, a imagem vai para o lado e o card fica baixo. */
@container (min-width: 32rem) {
    .pagina-hotsite__noticia-interior {
        flex-direction: row;
    }

    .pagina-hotsite__noticia-imagem {
        flex: 0 0 min(40%, 16rem);
        min-height: 9rem;
        aspect-ratio: auto;
    }

    .pagina-hotsite__noticia-corpo {
        padding: 1rem 1.25rem;
    }
}

/* PD 8 - Últimas notícias: grade que se ajusta à largura do próprio bloco. */
.pagina-hotsite__noticias-area {
    width: 100%;
    container-type: inline-size;
}

.pagina-hotsite__noticias {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 32rem) {
    .pagina-hotsite__noticias {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@container (min-width: 56rem) {
    .pagina-hotsite__noticias--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pagina-hotsite__noticias--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* PD 8 - formato Carrossel: uma linha que rola de lado, com encaixe em cada
   card (scroll-snap). As setas só rolam o trilho; arrastar, rolar e o teclado
   funcionam sem elas. */
.pagina-hotsite__carrossel-controles {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pagina-hotsite__carrossel-controles[hidden] {
    display: none;
}

/* Setas do carrossel de notícias: mesmo tamanho e cor das da página inicial. */
.pagina-hotsite__carrossel-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    padding: 0;
    color: #fff;
    background: rgba(8, 92, 252, 0.92);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.16s ease, opacity 0.16s ease;
}

.pagina-hotsite__carrossel-botao:hover:not(:disabled) {
    background: #064acb;
}

.pagina-hotsite__carrossel-botao:disabled {
    cursor: default;
    opacity: 0.35;
}

.pagina-hotsite__carrossel-botao:focus-visible,
.pagina-hotsite__carrossel-trilho:focus-visible {
    outline: 2px dashed var(--pagina-hotsite-foco);
    outline-offset: 2px;
}

.pagina-hotsite__carrossel-trilho {
    --carrossel-visiveis: 1;
    --carrossel-espaco: 1.5rem;
    display: grid;
    gap: var(--carrossel-espaco);
    grid-auto-columns: calc(
        (100% - (var(--carrossel-visiveis) - 1) * var(--carrossel-espaco)) /
            var(--carrossel-visiveis)
    );
    grid-auto-flow: column;
    /* Folga para a sombra e o "levantar" do card não serem cortados. */
    margin: -0.5rem -0.25rem;
    padding: 0.5rem 0.25rem 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-behavior: smooth;
    scroll-padding-inline: 0.25rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.pagina-hotsite__carrossel-trilho::-webkit-scrollbar {
    display: none;
}

.pagina-hotsite__carrossel-trilho > .pagina-hotsite__noticia {
    scroll-snap-align: start;
}

/* No celular a próxima notícia aparece pela metade, mostrando que há mais.
   Com uma notícia só não há o que mostrar ao lado: ela ocupa a largura toda. */
@container (max-width: 31.99rem) {
    .pagina-hotsite__carrossel-trilho:has(> :nth-child(2)) {
        grid-auto-columns: 85%;
    }
}

@container (min-width: 32rem) {
    .pagina-hotsite__carrossel-trilho {
        --carrossel-visiveis: 2;
    }
}

@container (min-width: 56rem) {
    .pagina-hotsite__carrossel-trilho--3 {
        --carrossel-visiveis: 3;
    }

    .pagina-hotsite__carrossel-trilho--4 {
        --carrossel-visiveis: 4;
    }
}

.pagina-hotsite__noticias-vazio {
    margin: 0;
    color: var(--pagina-hotsite-texto-suave);
}

/* ---------------------------------------------------------------------------
   PD 7 - modo Texto
   --------------------------------------------------------------------------- */
.pagina-hotsite__bloco-texto--texto {
    width: 100%;
    color: var(--pagina-hotsite-texto);
}

.pagina-hotsite__bloco-texto--texto .pagina-hotsite__bloco-texto-titulo {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.pagina-hotsite__bloco-texto--texto .pagina-hotsite__bloco-texto-corpo {
    line-height: 1.6;
}

.pagina-hotsite__bloco-texto--centro {
    text-align: center;
}

.pagina-hotsite__bloco-texto--direita {
    text-align: right;
}

.pagina-hotsite__bloco-texto--direita .pagina-hotsite__texto-botoes {
    justify-content: flex-end;
}

/* Linha de leitura confortável quando o texto ocupa uma coluna larga. */
.pagina-hotsite__bloco-texto--centro .pagina-hotsite__bloco-texto-corpo {
    max-width: 65ch;
    margin-right: auto;
    margin-left: auto;
}

/* Lista centralizada fica com os marcadores soltos: o bloco vai para o centro,
   os itens continuam alinhados entre si. */
.pagina-hotsite__bloco-texto--centro .pagina-hotsite__bloco-texto-corpo ul,
.pagina-hotsite__bloco-texto--centro .pagina-hotsite__bloco-texto-corpo ol {
    display: inline-block;
    text-align: left;
}

.pagina-hotsite__texto-chamada {
    margin: 0 0 0.25rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Imagem opcional do modo Texto. A largura consultada é a do próprio bloco
   (container query): em coluna estreita ou no celular a imagem fica acima do
   texto; com espaço, vai para o lado escolhido. */
.pagina-hotsite__bloco-texto--texto {
    container-type: inline-size;
}

.pagina-hotsite__texto-grade {
    display: grid;
    gap: 1.5rem;
}

.pagina-hotsite__texto-imagem img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 0.5rem;
}

.pagina-hotsite__bloco-texto--esquerda .pagina-hotsite__texto-imagem img {
    margin-left: 0;
}

/* Tamanho da imagem: Pequena e Média limitam a altura para a imagem acompanhar
   o texto em vez de dominar a página; Grande não limita. */
.pagina-hotsite__bloco-texto--tamanho-pequena .pagina-hotsite__texto-imagem img {
    max-height: 8rem;
}

.pagina-hotsite__bloco-texto--tamanho-media .pagina-hotsite__texto-imagem img {
    max-height: 14rem;
}

@container (min-width: 40rem) {
    /* A coluna da imagem fica do tamanho da própria imagem (até 40% do bloco)
       e o texto usa todo o resto. */
    .pagina-hotsite__bloco-texto--imagem-esquerda .pagina-hotsite__texto-grade,
    .pagina-hotsite__bloco-texto--imagem-direita .pagina-hotsite__texto-grade {
        grid-template-columns: fit-content(40%) minmax(0, 1fr);
        align-items: center;
        gap: 2rem;
    }

    .pagina-hotsite__bloco-texto--imagem-direita .pagina-hotsite__texto-grade {
        grid-template-columns: minmax(0, 1fr) fit-content(40%);
    }

    .pagina-hotsite__bloco-texto--imagem-direita .pagina-hotsite__texto-imagem {
        order: 2;
    }

    /* Grande: a imagem ocupa 5/12 do bloco, como no modelo do Plano Diretor. */
    .pagina-hotsite__bloco-texto--tamanho-grande.pagina-hotsite__bloco-texto--imagem-esquerda
        .pagina-hotsite__texto-grade {
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        gap: 3rem;
    }

    .pagina-hotsite__bloco-texto--tamanho-grande.pagina-hotsite__bloco-texto--imagem-direita
        .pagina-hotsite__texto-grade {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
    }
}

/* Botões opcionais do modo Texto: secundário (contorno) e principal (cheio),
   como os botões do gov.br. */
.pagina-hotsite__texto-botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.pagina-hotsite__bloco-texto--centro .pagina-hotsite__texto-botoes {
    justify-content: center;
}

.pagina-hotsite__botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1.5rem;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    background: var(--pagina-hotsite-destaque);
    border: 1px solid var(--pagina-hotsite-destaque);
    border-radius: 100em;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pagina-hotsite__botao:hover {
    color: #fff;
    text-decoration: none;
    background: #0c326f;
    border-color: #0c326f;
}

.pagina-hotsite__botao--secundario {
    color: var(--pagina-hotsite-destaque);
    background: #fff;
}

.pagina-hotsite__botao--secundario:hover {
    color: var(--pagina-hotsite-destaque);
    background: #dbe8fb;
    border-color: var(--pagina-hotsite-destaque);
}

.pagina-hotsite__botao .fa-external-link-alt {
    font-size: 0.8125rem;
}

/* ---------------------------------------------------------------------------
   PD 7 - modo Card (modelo de card do gov.br: cabeçalho com ícone, título,
   subtítulo e menu; imagem; texto). Mesma altura na linha (4 + 4 + 4 etc.).
   --------------------------------------------------------------------------- */
.pagina-hotsite__coluna > .pagina-hotsite__bloco-texto--card {
    flex: 1 1 auto;
}

/* Altura "Só o tamanho do conteúdo": o card não estica até o maior da linha. */
.pagina-hotsite__coluna > .pagina-hotsite__bloco-texto--altura-conteudo {
    flex: 0 0 auto;
}

.pagina-hotsite__bloco-texto--card.br-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    color: var(--pagina-hotsite-texto);
    background: #fff;
    border: 0;
    border-radius: 0.75rem;
    box-shadow: var(--pagina-hotsite-sombra-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.pagina-hotsite__bloco-texto--card.br-card:hover,
.pagina-hotsite__bloco-texto--card.br-card:focus-within {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
    transform: translateY(-6px);
}

.pagina-hotsite__card-cabecalho.card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: transparent;
    border: 0;
}

/* Círculo no tom escolhido (claro, médio ou escuro) e o desenho na cor de contraste
   desse tom (--bt-cor-sobre, mínimo 4,5:1). Antes usava --bt-cor-clara/--bt-cor-forte,
   iguais nos três tons da mesma cor: trocar o tom não mudava o ícone. */
.pagina-hotsite__card-icone {
    display: inline-flex;
    flex: 0 0 3.5rem;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    color: var(--bt-cor-sobre, #fff);
    font-size: 1.5rem;
    background: var(--bt-cor, var(--pagina-hotsite-destaque));
    border-radius: 50%;
}

.pagina-hotsite__card-titulos {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pagina-hotsite__bloco-texto--card .pagina-hotsite__bloco-texto-titulo {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
}

.pagina-hotsite__bloco-texto--card .pagina-hotsite__bloco-texto-subtitulo {
    margin: 0.125rem 0 0;
    color: var(--pagina-hotsite-texto-suave);
    font-size: 0.9375rem;
    line-height: 1.4;
}

.pagina-hotsite__card-imagem {
    padding: 0 1rem;
}

.pagina-hotsite__card-imagem img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 0.25rem;
}

.pagina-hotsite__bloco-texto--card .card-body {
    flex: 1 1 auto;
    padding: 0.75rem 1rem 1.25rem;
    line-height: 1.5;
}

.pagina-hotsite__card-cabecalho + .card-body {
    padding-top: 0;
}

/* Botão do rodapé do card (opcional): fica sempre na base do card. */
.pagina-hotsite__card-rodape.card-footer {
    margin-top: auto;
    padding: 0 0.5rem 0.75rem;
    background: transparent;
    border: 0;
}

.pagina-hotsite__bloco-texto--card .card-body + .pagina-hotsite__card-rodape {
    margin-top: -0.5rem;
}

.pagina-hotsite__card-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1rem;
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    font-weight: 600;
    text-decoration: none;
    border-radius: 100em;
    transition: background-color 0.15s ease;
}

.pagina-hotsite__card-botao:hover {
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    text-decoration: none;
    background: var(--bt-cor-clara, rgba(19, 81, 180, 0.16));
}

.pagina-hotsite__card-botao .fa-external-link-alt {
    font-size: 0.8125rem;
}

/* Barra colorida na base do card, na cor do card.
   No card preenchido, um tom mais escuro da própria cor. */
.pagina-hotsite__bloco-texto--card.br-card {
    border-bottom: 4px solid var(--bt-cor, var(--pagina-hotsite-destaque));
}

.pagina-hotsite__card--cheio.br-card {
    border-bottom-color: rgba(0, 0, 0, 0.25);
}

/* "Mostrar barra embaixo do card" desmarcado (campo mostrar_barra). */
.pagina-hotsite__card--sem-barra.br-card {
    border-bottom: 0;
}

/* Setinha: abre a página de destino do card. O link se estende pelo card
   inteiro; menu da imagem, botões e links do texto ficam por cima dele e
   continuam clicáveis. */
.pagina-hotsite__card--com-destino.br-card {
    position: relative;
}

.pagina-hotsite__card-destino {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: auto;
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    font-size: 1.125rem;
    text-decoration: none;
    border-radius: 50%;
    transition: background-color 0.15s ease;
}

.pagina-hotsite__card-destino::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
}

.pagina-hotsite__card-destino .fa-arrow-right {
    transition: transform 0.2s ease;
}

.pagina-hotsite__card--com-destino:hover .pagina-hotsite__card-destino {
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    background: var(--bt-cor-clara, var(--pagina-hotsite-destaque-claro));
}

.pagina-hotsite__card--com-destino:hover .pagina-hotsite__card-destino .fa-arrow-right {
    transform: translateX(3px);
}

.pagina-hotsite__card-destino:focus-visible {
    outline: none;
}

.pagina-hotsite__card-destino:focus-visible::after {
    outline: 2px dashed var(--pagina-hotsite-foco);
    outline-offset: 3px;
}

.pagina-hotsite__card--com-destino .pagina-hotsite__card-menu,
.pagina-hotsite__card--com-destino .pagina-hotsite__card-botao,
.pagina-hotsite__card--com-destino .pagina-hotsite__bloco-texto-corpo a {
    position: relative;
    z-index: 1;
}

.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-destino {
    margin-left: 0;
}

.pagina-hotsite__card--cheio .pagina-hotsite__card-destino,
.pagina-hotsite__card--cheio.pagina-hotsite__card--com-destino:hover .pagina-hotsite__card-destino {
    color: var(--bt-cor-sobre);
}

.pagina-hotsite__card--cheio.pagina-hotsite__card--com-destino:hover .pagina-hotsite__card-destino {
    background: rgba(255, 255, 255, 0.2);
}

/* Ícone em destaque (modelo dos cards dos eixos): quadrado arredondado
   grande, acima do título, saindo um pouco pela borda de cima do card. */
.pagina-hotsite__card--icone-destaque.br-card {
    position: relative;
    margin-top: 2.25rem;
}

.pagina-hotsite__card--icone-destaque .pagina-hotsite__card-cabecalho.card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.pagina-hotsite__card--icone-destaque.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-cabecalho.card-header {
    align-items: center;
}

.pagina-hotsite__card--icone-destaque.pagina-hotsite__card--alinha-direita .pagina-hotsite__card-cabecalho.card-header {
    align-items: flex-end;
}

.pagina-hotsite__card--icone-destaque .pagina-hotsite__card-icone {
    flex: 0 0 auto;
    width: 4.75rem;
    height: 4.75rem;
    margin-top: -3.25rem;
    font-size: 2.25rem;
    border-radius: 1rem;
    box-shadow: var(--pagina-hotsite-sombra-md);
}

.pagina-hotsite__card--icone-destaque .pagina-hotsite__card-titulos {
    width: 100%;
}

.pagina-hotsite__card--icone-destaque .pagina-hotsite__card-menu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.pagina-hotsite__card--icone-destaque .pagina-hotsite__card-destino {
    align-self: flex-end;
}

.pagina-hotsite__card--icone-destaque.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-destino {
    align-self: center;
}

@media (prefers-reduced-motion: reduce) {
    .pagina-hotsite__card-destino,
    .pagina-hotsite__card-destino .fa-arrow-right {
        transition: none;
    }

    .pagina-hotsite__card--com-destino:hover .pagina-hotsite__card-destino .fa-arrow-right {
        transform: none;
    }
}

/* Card "Preenchido": o card inteiro na cor escolhida, texto na cor de contraste
   da paleta e o ícone em um círculo branco. */
.pagina-hotsite__card--cheio.br-card {
    color: var(--bt-cor-sobre);
    background: var(--bt-cor);
}

.pagina-hotsite__card--cheio .pagina-hotsite__bloco-texto-subtitulo {
    color: inherit;
    opacity: 0.92;
}

/* Card preenchido: o card já está na cor; o círculo fica branco e o desenho na cor forte. */
.pagina-hotsite__card--cheio .pagina-hotsite__card-icone {
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    background: #fff;
}

.pagina-hotsite__card--cheio .pagina-hotsite__card-botao,
.pagina-hotsite__card--cheio .pagina-hotsite__card-menu-botao {
    color: inherit;
}

.pagina-hotsite__card--cheio .pagina-hotsite__card-botao:hover,
.pagina-hotsite__card--cheio .pagina-hotsite__card-menu-botao:hover,
.pagina-hotsite__card--cheio .pagina-hotsite__card-menu-botao[aria-expanded="true"] {
    color: inherit;
    background: rgba(255, 255, 255, 0.24);
}

/* O CSS do site dá cor própria a parágrafos e listas: dentro do card
   preenchido, todo o texto segue a cor de contraste do card. */
.pagina-hotsite__card--cheio .pagina-hotsite__bloco-texto-corpo,
.pagina-hotsite__card--cheio .pagina-hotsite__bloco-texto-corpo * {
    color: inherit;
}

.pagina-hotsite__card--cheio .pagina-hotsite__bloco-texto-corpo a {
    text-decoration: underline;
}

.pagina-hotsite__card--cheio .pagina-hotsite__card-botao:focus-visible,
.pagina-hotsite__card--cheio .pagina-hotsite__card-menu-botao:focus-visible {
    outline-color: var(--bt-cor-sobre);
}

/* Card "Leve" (modelo da página de serviços do gov.br): fundo cinza bem claro,
   sem sombra, título na cor e o ícone grande, sem círculo, numa coluna à esquerda
   do título e do texto. Vem depois do ícone em destaque para valer sobre ele. */
.pagina-hotsite__card--leve.br-card {
    margin-top: 0;
    background: #f8f8f8;
    box-shadow: none;
}

.pagina-hotsite__card--leve .pagina-hotsite__bloco-texto-titulo {
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
}

.pagina-hotsite__card--leve .pagina-hotsite__card-icone {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    margin-top: 0;
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    font-size: 2.75rem;
    background: none;
    box-shadow: none;
}

/* O gov.br fixa o tamanho no próprio <i> (--icon-size): sem isso o desenho fica pequeno. */
.pagina-hotsite__card--leve .pagina-hotsite__card-icone i {
    font-size: 2.75rem;
    line-height: 1;
}

/* À esquerda (ou à direita): o ícone sai do cabeçalho e o card abre espaço para ele,
   assim o texto também fica ao lado do ícone. Centralizado, fica acima do título. */
.pagina-hotsite__card--leve.pagina-hotsite__card--com-icone:not(.pagina-hotsite__card--alinha-centro) {
    position: relative;
    padding-left: 4.25rem;
}

.pagina-hotsite__card--leve.pagina-hotsite__card--com-icone:not(.pagina-hotsite__card--alinha-centro) .pagina-hotsite__card-icone {
    position: absolute;
    top: 1rem;
    left: 1.25rem;
}

.pagina-hotsite__card--leve.pagina-hotsite__card--alinha-direita.pagina-hotsite__card--com-icone {
    padding-right: 4.25rem;
    padding-left: 0;
}

.pagina-hotsite__card--leve.pagina-hotsite__card--alinha-direita.pagina-hotsite__card--com-icone .pagina-hotsite__card-icone {
    right: 1.25rem;
    left: auto;
}

.pagina-hotsite__card--leve .pagina-hotsite__card-cabecalho.card-header {
    flex-direction: row;
    align-items: flex-start;
}

.pagina-hotsite__card--leve.pagina-hotsite__card--alinha-direita .pagina-hotsite__card-cabecalho.card-header {
    flex-direction: row-reverse;
}

.pagina-hotsite__card--leve.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-cabecalho.card-header {
    flex-direction: column;
    align-items: center;
}

/* Cards na mesma coluna (PD 7, CardAgrupado): um embaixo do outro. Com a coluna
   mais alta que eles (outro bloco maior na linha), dividem a sobra entre si. */
.pagina-hotsite__cards-coluna {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pagina-hotsite__coluna > .pagina-hotsite__cards-coluna {
    flex: 1 1 auto;
}

.pagina-hotsite__cards-coluna > .pagina-hotsite__bloco-texto--card {
    flex: 1 1 auto;
}

.pagina-hotsite__cards-coluna > .pagina-hotsite__bloco-texto--altura-conteudo {
    flex: 0 0 auto;
}

/* "Lado a lado": quantos cards couberem por linha, cada um com pelo menos 14rem; os
   que não cabem descem para a linha de baixo. O min(14rem, 100%) impede que uma coluna
   mais estreita que 14rem force a largura e crie rolagem para os lados. */
.pagina-hotsite__cards-coluna.pagina-hotsite__cards-coluna--lado-a-lado {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    align-items: stretch;
}

/* Alinhamento do card: centralizado põe o ícone acima do título; à direita
   espelha o cabeçalho. */
.pagina-hotsite__card--alinha-centro {
    position: relative;
    text-align: center;
}

.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-cabecalho.card-header {
    flex-direction: column;
    gap: 0.75rem;
}

.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-titulos {
    flex: 0 1 auto;
    width: 100%;
}

.pagina-hotsite__card--alinha-centro .pagina-hotsite__card-menu {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.pagina-hotsite__card--alinha-centro .pagina-hotsite__bloco-texto-corpo ul,
.pagina-hotsite__card--alinha-centro .pagina-hotsite__bloco-texto-corpo ol {
    display: inline-block;
    text-align: left;
}

.pagina-hotsite__card--alinha-direita {
    text-align: right;
}

.pagina-hotsite__card--alinha-direita .pagina-hotsite__card-cabecalho.card-header {
    flex-direction: row-reverse;
}

/* Três pontinhos: opções da imagem do card. */
.pagina-hotsite__card-menu {
    position: relative;
    flex: 0 0 auto;
    align-self: flex-start;
}

.pagina-hotsite__card-menu-botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    color: var(--bt-cor-forte, var(--pagina-hotsite-destaque));
    background: transparent;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.pagina-hotsite__card-menu-botao:hover,
.pagina-hotsite__card-menu-botao[aria-expanded="true"] {
    background: var(--bt-cor-clara, rgba(19, 81, 180, 0.16));
}

.pagina-hotsite__card-menu-botao:focus-visible,
.pagina-hotsite__card-menu-lista a:focus-visible,
.pagina-hotsite__card-botao:focus-visible,
.pagina-hotsite__botao:focus-visible,
.pagina-hotsite__faq-pergunta:focus-visible {
    outline: 2px dashed var(--pagina-hotsite-foco);
    outline-offset: 2px;
}

.pagina-hotsite__card-menu-lista {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    right: 0;
    min-width: 12rem;
    margin: 0;
    padding: 0.25rem 0;
    list-style: none;
    background: #fff;
    border-radius: 0.25rem;
    box-shadow: var(--pagina-hotsite-sombra-md);
    transform-origin: top right;
    animation: pagina-hotsite-menu-abrir 0.14s ease-out;
}

.pagina-hotsite__card-menu-lista[hidden] {
    display: none;
}

.pagina-hotsite__card-menu-lista a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
}

.pagina-hotsite__card-menu-lista a:hover {
    background: rgba(19, 81, 180, 0.08);
}

.pagina-hotsite__card-menu-lista i {
    width: 1rem;
    text-align: center;
}

@keyframes pagina-hotsite-menu-abrir {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(-0.25rem);
    }
}

/* ---------------------------------------------------------------------------
   PD 7 - modo FAQ: largura configurável, centralizada na coluna.
   --------------------------------------------------------------------------- */
.pagina-hotsite__bloco-texto--faq {
    width: 100%;
    margin-right: auto;
    margin-left: auto;
    color: var(--pagina-hotsite-texto);
}

.pagina-hotsite__faq--estreita {
    max-width: 47.5rem;
}

.pagina-hotsite__faq--media {
    max-width: 60rem;
}

.pagina-hotsite__faq-cabecalho {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Alinhamento do cabeçalho da FAQ (campo "alinhamento"; o padrão é centralizado). */
.pagina-hotsite__faq-cabecalho--esquerda {
    text-align: left;
}

.pagina-hotsite__faq-cabecalho--direita {
    text-align: right;
}

/* Ícone da FAQ (opcional): círculo acima da chamada e do título; segue o alinhamento. */
.pagina-hotsite__faq-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 1.5rem;
    background: var(--pagina-hotsite-destaque-claro);
    border-radius: 50%;
}

/* Tamanho direto no ícone: não depende do font-size herdado da FAQ. */
.pagina-hotsite__faq-icone i {
    font-size: 1.5rem;
    line-height: 1;
}

/* Ícone na mesma linha do título (à esquerda ou à direita): o título vira uma linha
   com o ícone, que segue o alinhamento do cabeçalho. */
.pagina-hotsite__faq-titulo--icone-esquerda,
.pagina-hotsite__faq-titulo--icone-direita {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.pagina-hotsite__faq-icone--linha {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 0;
}

.pagina-hotsite__faq-icone--linha i {
    font-size: 1.25rem;
}

.pagina-hotsite__faq-chamada {
    margin: 0 0 0.25rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 0.9375rem;
    font-weight: 700;
}

.pagina-hotsite__faq-cabecalho .pagina-hotsite__bloco-texto-titulo {
    margin: 0;
    font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    font-weight: 600;
    line-height: 1.25;
}

/* Campo "Pesquisar" da FAQ (aparece quando há muitas perguntas). */
.pagina-hotsite__faq-pesquisa {
    position: relative;
    margin-bottom: 1rem;
}

.pagina-hotsite__faq-pesquisa .fa-search {
    position: absolute;
    top: 50%;
    left: 1rem;
    color: var(--pagina-hotsite-destaque);
    transform: translateY(-50%);
    pointer-events: none;
}

.pagina-hotsite__faq-pesquisa input {
    width: 100%;
    height: 2.5rem;
    padding: 0 1rem 0 2.75rem;
    color: var(--pagina-hotsite-texto);
    background: #fff;
    border: 1px solid #888;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pagina-hotsite__faq-pesquisa input:hover {
    border-color: var(--pagina-hotsite-destaque);
}

.pagina-hotsite__faq-pesquisa input:focus {
    border-color: var(--pagina-hotsite-foco);
    outline: none;
    box-shadow: 0 0 0 2px var(--pagina-hotsite-foco);
}

.pagina-hotsite__faq-item[hidden] {
    display: none;
}

.pagina-hotsite__faq-vazio {
    margin: 1rem 0 0;
    color: var(--pagina-hotsite-texto-suave);
    text-align: center;
}

.pagina-hotsite__faq-item {
    margin-bottom: 0.75rem;
    background: #fff;
    border: 1px solid var(--pagina-hotsite-borda);
    border-radius: 0.375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pagina-hotsite__faq-item:last-child {
    margin-bottom: 0;
}

.pagina-hotsite__faq-item:hover,
.pagina-hotsite__faq-item[open] {
    border-color: var(--pagina-hotsite-destaque);
}

.pagina-hotsite__faq-item[open] {
    box-shadow: var(--pagina-hotsite-sombra-sm);
}

.pagina-hotsite__faq-pergunta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 600;
    line-height: 1.4;
    list-style: none;
    border-radius: 0.375rem;
    cursor: pointer;
}

.pagina-hotsite__faq-pergunta::-webkit-details-marker {
    display: none;
}

.pagina-hotsite__faq-seta {
    flex: 0 0 auto;
    color: var(--pagina-hotsite-destaque);
    transition: transform 0.2s ease;
}

.pagina-hotsite__faq-item[open] .pagina-hotsite__faq-seta {
    transform: rotate(180deg);
}

.pagina-hotsite__faq-resposta {
    padding: 0 1.25rem 1.125rem;
    line-height: 1.6;
    animation: pagina-hotsite-faq-abrir 0.22s ease-out;
}

@keyframes pagina-hotsite-faq-abrir {
    from {
        opacity: 0;
        transform: translateY(-0.375rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-hotsite__carrossel-trilho {
        scroll-behavior: auto;
    }

    .pagina-hotsite__carrossel-botao,
    .pagina-hotsite__noticia,
    .pagina-hotsite__linha-link .fa-chevron-right,
    .pagina-hotsite__bloco-texto--card.br-card,
    .pagina-hotsite__card-menu-botao,
    .pagina-hotsite__card-botao,
    .pagina-hotsite__botao,
    .pagina-hotsite__faq-pesquisa input,
    .pagina-hotsite__faq-item,
    .pagina-hotsite__faq-seta {
        transition: none;
    }

    .pagina-hotsite__noticia:hover,
    .pagina-hotsite__noticia:focus-within,
    .pagina-hotsite__linha-link:hover .fa-chevron-right,
    .pagina-hotsite__bloco-texto--card.br-card:hover,
    .pagina-hotsite__bloco-texto--card.br-card:focus-within {
        transform: none;
    }

    .pagina-hotsite__card-menu-lista,
    .pagina-hotsite__faq-resposta {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
   Cabeçalho da página (Página / PD 1): subtítulo, alinhamento e, com cor, uma
   faixa de ponta a ponta na cor escolhida (core/css/cores-palmas.css), com o
   texto na cor de contraste (mínimo 4,5:1). Cor sólida, sem degradê.
   --------------------------------------------------------------------------- */
.pagina-hotsite__cabecalho--centro {
    text-align: center;
}

.pagina-hotsite__subtitulo {
    margin: -0.25rem 0 1.5rem;
    color: var(--pagina-hotsite-texto-suave);
    font-size: 1.125rem;
    line-height: 1.5;
}

.pagina-hotsite__cabecalho--faixa {
    padding: 3rem 0 2.5rem;
    color: var(--bt-cor-sobre);
    background: var(--bt-cor);
}

.pagina-hotsite__cabecalho--faixa .pagina-hotsite__titulo {
    margin: 0;
    color: var(--bt-cor-sobre);
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
}

.pagina-hotsite__cabecalho--faixa .pagina-hotsite__subtitulo {
    margin: 0.75rem 0 0;
    color: var(--bt-cor-sobre);
    font-size: clamp(1rem, 2vw, 1.25rem);
}

@media (max-width: 575px) {
    .pagina-hotsite__cabecalho--faixa {
        padding: 2rem 0 1.75rem;
    }
}

/* Imagem no cabeçalho (Página do Hotsite e processo da Consulta). A imagem vem do
   template em --cabecalho-imagem. "Com cor": uma camada lisa da cor da faixa (85%,
   sem degradê) cobre a foto e o texto usa a cor de contraste da paleta, legível com
   qualquer foto. "Sem cor": a foto pura com sombra no texto (o manual pede foto
   escura atrás do título). */
.pagina-hotsite__cabecalho--imagem-com_cor {
    position: relative;
    isolation: isolate;
    background: var(--cabecalho-imagem) center / cover no-repeat, var(--bt-cor);
}

.pagina-hotsite__cabecalho--imagem-com_cor::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--bt-cor) 85%, transparent);
}

.pagina-hotsite__cabecalho--imagem-sem_cor {
    --bt-cor-sobre: #fff;
    background: var(--cabecalho-imagem) center / cover no-repeat, #071d41;
}

.pagina-hotsite__cabecalho--imagem-sem_cor :is(h1, p, nav, a) {
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.6);
}

/* PD 9 - Carrossel de banners: um banner por vez, no mesmo trilho do carrossel
   de notícias (deslizar suave), como na página inicial do portal: setas sobre a
   imagem, que aparecem com o mouse ou o foco. O primeiro banner define a
   proporção (--carrossel-proporcao, vinda do service; sem ela, o padrão do
   site 1280 x 330); os outros preenchem o mesmo espaço (object-fit: cover). */
.pagina-hotsite__carrossel-banners {
    position: relative;
}

.pagina-hotsite__carrossel-trilho.pagina-hotsite__carrossel-trilho--banners {
    --carrossel-visiveis: 1;
    --carrossel-espaco: 0px;
    grid-auto-columns: 100%;
    grid-template-rows: 100%;
    margin: 0;
    padding: 0;
    /* Sem a folga de 0.25rem do carrossel de notícias: com ela o encaixe parava 4px
       antes do banner e aparecia uma faixa do banner anterior na borda. */
    scroll-padding-inline: 0;
    aspect-ratio: var(--carrossel-proporcao, 1280 / 330);
    border-radius: 0.25rem;
}

.pagina-hotsite__carrossel-slide {
    min-width: 0;
    height: 100%;
    scroll-snap-align: start;
}

.pagina-hotsite__carrossel-slide a {
    display: block;
    height: 100%;
}

.pagina-hotsite__carrossel-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pagina-hotsite__carrossel-banners--unico img {
    display: block;
    width: 100%;
    height: auto;
}

/* Setas sobre a imagem (mesmo desenho do banner da página inicial). */
.pagina-hotsite__carrossel-setas {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.75rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.pagina-hotsite__carrossel-setas[hidden] {
    display: none;
}

.pagina-hotsite__carrossel-banners:hover .pagina-hotsite__carrossel-setas,
.pagina-hotsite__carrossel-banners:focus-within .pagina-hotsite__carrossel-setas {
    opacity: 1;
}

.pagina-hotsite__carrossel-seta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    padding: 0;
    color: #fff;
    font-size: 1.1875rem;
    background: rgba(0, 82, 255, 0.58);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;
    box-shadow: 0 3px 10px rgba(0, 48, 130, 0.16);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.16s ease, transform 0.16s ease;
}

.pagina-hotsite__carrossel-seta:hover,
.pagina-hotsite__carrossel-seta:focus-visible {
    background: rgba(0, 82, 255, 0.78);
    transform: scale(1.03);
}

.pagina-hotsite__carrossel-seta:focus-visible {
    outline: 2px dashed var(--pagina-hotsite-foco);
    outline-offset: 2px;
}

/* No toque não há "passar o mouse": as setas ficam escondidas e o banner
   passa com o dedo, como na página inicial. */
@media (hover: none) {
    .pagina-hotsite__carrossel-setas {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .pagina-hotsite__carrossel-setas,
    .pagina-hotsite__carrossel-seta {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Agenda em destaque: próximos eventos da Agenda, um card por linha (data em
   destaque, categoria, título, horário/local e os botões de credenciamento e
   mapa, quando preenchidos).
   --------------------------------------------------------------------------- */
.pagina-hotsite__agenda-area {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
}

.pagina-hotsite__agenda-lista {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pagina-hotsite__agenda-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: var(--pagina-hotsite-sombra-sm);
}

.pagina-hotsite__agenda-data {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    color: #fff;
    background: #1c1c1c;
    border-radius: 0.5rem;
}

.pagina-hotsite__agenda-dia {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
}

.pagina-hotsite__agenda-mes {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pagina-hotsite__agenda-info {
    flex: 1 1 16rem;
    min-width: 0;
}

.pagina-hotsite__agenda-categoria {
    margin: 0 0 0.25rem;
    color: var(--pagina-hotsite-destaque);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pagina-hotsite__agenda-titulo {
    margin: 0 0 0.375rem;
    color: var(--pagina-hotsite-texto);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
}

.pagina-hotsite__agenda-detalhes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0;
    color: var(--pagina-hotsite-texto-suave);
    font-size: 0.875rem;
}

.pagina-hotsite__agenda-detalhes i {
    margin-right: 0.25rem;
    color: var(--pagina-hotsite-destaque);
}

.pagina-hotsite__agenda-acoes {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Evento marcado como "Inscrição obrigatória" mas sem o link de credenciamento
   preenchido ainda: avisa em vez de só sumir o botão, pra quem edita a Agenda
   notar que falta completar o cadastro. */
.pagina-hotsite__agenda-aviso {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--pagina-hotsite-foco);
    font-size: 0.875rem;
    font-weight: 600;
}

.pagina-hotsite__agenda-completa {
    align-self: flex-end;
}

.pagina-hotsite__agenda-vazio {
    margin: 0;
    color: var(--pagina-hotsite-texto-suave);
}


/* ---------------------------------------------------------------------------
   PD 9 - Botão de ação rápida por banner: opcional, substitui o link da
   imagem inteira quando preenchido (ver hotsite/content_kinds/_banner_slide.html).
   --------------------------------------------------------------------------- */
.pagina-hotsite__carrossel-banner-com-botao {
    position: relative;
    display: block;
}

.pagina-hotsite__carrossel-slide .pagina-hotsite__carrossel-banner-botao {
    /* ".pagina-hotsite__carrossel-slide a" (acima) é pro link que envolve a
       imagem inteira; sem isto, o botão herdava display:block + height:100%
       dessa regra e virava uma pílula esticada do tamanho do banner. */
    display: inline-flex;
    height: auto;
}

.pagina-hotsite__carrossel-banner-botao {
    position: absolute;
    left: 1.5rem;
    bottom: 1.5rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

@media (max-width: 575.98px) {
    .pagina-hotsite__carrossel-banner-botao {
        left: 1rem;
        bottom: 1rem;
    }
}

/* Agenda em destaque, formato "Card": atalho para a agenda completa, como o card
   "Agenda" do site do Plano Diretor. Cor de Palmas na faixa, na borda e no ícone
   (texto da faixa na cor de contraste da paleta); sem cor, o azul do gov.br. */
.pagina-hotsite__agenda-atalho {
    --atalho-cor: var(--bt-cor, #1351b4);
    --atalho-sobre: var(--bt-cor-sobre, #fff);
    --atalho-forte: var(--bt-cor-forte, #1351b4);
    display: flex;
    flex-direction: column;
    max-width: 34rem;
    margin: 0 auto;
    overflow: hidden;
    color: #333;
    text-decoration: none;
    background: #fff;
    border: 2px solid var(--atalho-cor);
    border-radius: 0.5rem;
    box-shadow: var(--pagina-hotsite-sombra-md, 0 3px 6px rgba(0, 0, 0, 0.16));
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.pagina-hotsite__agenda-atalho:hover {
    color: #333;
    text-decoration: none;
    box-shadow: var(--pagina-hotsite-sombra-lg, 0 6px 12px rgba(0, 0, 0, 0.16));
    transform: translateY(-2px);
}

.pagina-hotsite__agenda-atalho:focus-visible {
    outline: 2px dashed var(--pagina-hotsite-foco, #c2850c);
    outline-offset: 3px;
}

.pagina-hotsite__agenda-atalho-faixa {
    padding: 0.625rem 1rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--atalho-sobre);
    text-align: center;
    background: var(--atalho-cor);
}

.pagina-hotsite__agenda-atalho-corpo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
}

.pagina-hotsite__agenda-atalho-texto {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
}

.pagina-hotsite__agenda-atalho-icone {
    flex: none;
    font-size: 2.5rem;
    color: var(--atalho-forte);
}

@media (prefers-reduced-motion: reduce) {
    .pagina-hotsite__agenda-atalho,
    .pagina-hotsite__agenda-atalho:hover {
        transition: none;
        transform: none;
    }
}

/* PD 6, modelo "Documentos": uma linha por arquivo (ícone do tipo, data, título,
   descrição e botão Baixar). No celular o botão desce para baixo do texto. */
.pagina-hotsite__documentos {
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagina-hotsite__documento {
    display: grid;
    grid-template-columns: 4rem minmax(0, 1fr) auto;
    gap: 1rem 1.5rem;
    align-items: center;
    padding: 1.25rem 0.5rem;
    border-top: 1px solid #e0e0e0;
}

.pagina-hotsite__documento:last-child {
    border-bottom: 1px solid #e0e0e0;
}

.pagina-hotsite__documento-data {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 0 0.25rem;
    color: #636363;
    font-size: 0.875rem;
}

.pagina-hotsite__documento-titulo {
    margin: 0;
    color: #071d41;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.pagina-hotsite__documento-descricao {
    margin: 0.25rem 0 0;
    color: #555;
}

.pagina-hotsite__documento-baixar {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    padding: 0 1.5rem;
    color: #1351b4;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    background: #fff;
    border: 1px solid #1351b4;
    border-radius: 999px;
}

.pagina-hotsite__documento-baixar:hover {
    color: #1351b4;
    text-decoration: none;
    background: #edf5ff;
}

.pagina-hotsite__documento-baixar:focus-visible {
    outline: 3px dashed #c2850c;
    outline-offset: 2px;
}

@media (max-width: 575.98px) {
    .pagina-hotsite__documento {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .pagina-hotsite__documento-baixar {
        grid-column: 1 / -1;
        justify-content: center;
    }
}