/* ==========================================================================
   Publicações — ABMES Editora
   --------------------------------------------------------------------------
   Medidas lidas dos operadores do LandingPage-Publicacoes.pdf (1440 x 3356,9).
   Nada aqui foi estimado a olho.

   🔴 A REGRA DO CONTÊINER, que ja custou caro em Notícias:
      usar width: min(100% - 48px, 1170px) -- e NAO max-width com
      padding-inline dentro. A segunda forma entrega 1122 de conteudo quando se
      pediu 1170, e o erro aparece longe da causa: o titulo desalinha E a foto
      encolhe junto.

   As tres correcoes ao PDF autorizadas pelo Jonh (trilha, "Pulbicações" e a
   margem do hero em 135) estao explicadas no cabecalho da view.
   ========================================================================== */

:root {
    --pub-fundo-destaque: #E5EAD2;   /* faixa da publicacao em destaque */
    --pub-cartao-fundo:   #214138;   /* cartoes e faixa de inteligencia */
    --pub-capa-fundo:     #1D332D;   /* atras da capa, no cartao */
    --pub-borda-filtro:   #8FC68A;   /* borda das pastilhas -- medida no PDF */
    --pub-lista-fundo:    #1D332D;   /* painel da lista aberta */
    --pub-arte-hero:      #ECECEE;   /* a arte do hero -- cor medida no PDF */
    --pub-galeria-fundo:  #1D2E29;   /* caixa da galeria -- medida no caminho arredondado */
    --pub-docs-fundo:     #ECECEE;   /* cartao de Documentos -- medido */
    --pub-doc-fundo:      #D9D9D9;   /* os dois cartoes de dentro -- da arte de referencia */
    --pub-iase-claro:     #F0F7EF;   /* metade clara da faixa IASE -- medido */
    --pub-iase-verde:     #72BC87;   /* metade verde -- medido */
    --pub-iase-botao:     #45665C;   /* botao "Conhecer solucoes" -- medido */

    /* degrade da faixa IASE -- extraido do objeto 44 do PDF (ShadingType 2) */
    --pub-iase-degrade-ini: #C9DCA5;
    --pub-iase-degrade-fim: #A7D0B1;

    /**
     * O chevron das pastilhas, em SVG.
     *
     * ⚠️ Os "#" precisam ir como %23 dentro do data URI -- um "#" cru encerra
     * a URL ali mesmo, e o ícone simplesmente não aparece, sem erro nenhum no
     * console.
     */
    --pub-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%238FC68A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pub-chevron-lima: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23A8E61E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* variante institucional do combo (`.filtro-institucional`) -- ver o comentário junto da regra */
    --pub-chevron-institucional: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23214138' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --pub-chevron-institucional-escuro: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' fill='none' stroke='%23163029' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------- HERO ---- */

/**
 * 🔴 PADDING-BLOCK PADRONIZADO EM 02/09/2026 com `.ec-hero` (eventos.css) --
 * pedido do Jonh: 44px/36px em toda "row de título" do portal (antes eram
 * 62px/40px, medidos só deste PDF).
 */
.pub-hero {
    background: var(--branco);
    padding-block: 44px 36px;
}

.pub-hero__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 40px;
    align-items: center;
}

/**
 * 🔴 PADRONIZADO EM 02/09/2026 com `.ec-hero` (eventos.css) -- pedido do
 * Jonh: mesma fonte/tamanho/espaçamento em toda "row de título" do portal.
 * `line-height`/`letter-spacing`/margens abaixo são os MESMOS de `.ec-hero`;
 * só `max-width` da chamada (900px, e não 60ch) e o `padding-block` da faixa
 * continuam próprios desta página -- dependem do texto e do que vem abaixo.
 */
.pub-hero__titulo {
    margin: 0;
    font-size: 72px;                 /* medido */
    line-height: 1;
    font-weight: 700;
    color: var(--verde-escuro);
    letter-spacing: -0.01em;
}

.pub-hero__apoio {
    margin: 14px 0 0;
    font-size: 22px;                 /* medido */
    font-weight: 400;
    line-height: 1.2;
    color: var(--lima-escuro);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.pub-hero__chamada {
    margin: 30px 0 0;
    max-width: 900px;
    font-size: 28px;                 /* medido */
    line-height: 1.2;                /* linhas em 363,1 / 396,7 / 430,3 -> 33,6 */
    font-weight: 700;
    color: var(--verde-escuro);
}

.pub-hero__acoes {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

/**
 * A arte do canto direito: bloquinho de folhas com lapis.
 *
 * Ate 12/08 aqui havia so uma caixa com gradiente -- um marcador de posicao que
 * eu nunca troquei pelo desenho. O desenho de verdade e vetor no PDF e agora
 * vem da parcial icone-hero-publicacoes.phtml, medindo 200,75 x 200,32.
 *
 * ⚠️ margin-left: auto encosta a arte na borda DIREITA DO CONTEUDO (1305), e
 * nao no x=1321,5 do PDF. O hero foi alinhado em 135 com sua autorizacao; se a
 * arte ficasse em 1321,5 ela furaria a margem que o proprio hero passou a
 * respeitar -- e criaria rolagem horizontal em telas estreitas.
 *
 * O alinhamento vertical continua pelo grid (align-items: center). Fica ~12 px
 * abaixo do centro exato do PDF, diferenca menor que a propria variacao de
 * renderizacao da fonte -- e prender a arte com margem fixa quebraria assim que
 * o texto reflusse.
 */
.pub-hero__arte {
    display: block;
    width: 200.75px;
    height: 200.32px;
    margin-left: auto;
    color: var(--pub-arte-hero);
}

/* botao escuro vazado -- "Baixar Pesquisas de Mercado" e "Ler mais" */
.botao--contorno-escuro {
    border: 2px solid var(--verde-escuro);
    color: var(--verde-escuro);
    background: transparent;
}
.botao--contorno-escuro:hover {
    background: var(--verde-escuro);
    color: var(--branco);
}

/* botao claro vazado -- dentro dos cartoes escuros */
.botao--contorno-claro {
    border: 2px solid var(--branco);
    color: var(--branco);
    background: transparent;
}
.botao--contorno-claro:hover {
    background: var(--branco);
    color: var(--verde-escuro);
}

/* botao solido escuro -- "Ver todas as publicações da Editora" */
.botao--escuro {
    background: var(--verde-escuro);
    color: var(--lima);
    border: 2px solid var(--verde-escuro);
}
.botao--escuro:hover {
    background: #1a332c;
    color: var(--lima);
}

/* ------------------------------------------------------------ FILTROS ---- */

/* --------------------------------------------------------------------------
   FILTROS — medidos no render 1px = 1pt, nao estimados

     faixa            y 558 .. 723   (altura 166)
     campo de busca   x 219 .. 1221  (1003)   y 578 .. 647  (altura 70)
     pastilhas        y 668 .. 694   (altura 27)   vao 8
       Tipo de Publicação  x 391..566  (176)
       Eixo Temático       x 573..716  (144)
       Ano de Publicação   x 724..899  (176)
       Tipo de Acesso      x 906..1049 (144)

   O conjunto das pastilhas vai de 391 a 1049: centro em 720, que e o meio
   exato da pagina de 1440. Por isso as duas linhas sao centralizadas, e nao
   alinhadas a esquerda da grade de conteudo.

   Espacos verticais que sairam da medicao:
     558 -> 578  = 20 do topo da faixa ate o campo
     647 -> 668  = 21 do campo ate as pastilhas
     694 -> 723  = 29 das pastilhas ate o fim da faixa
   -------------------------------------------------------------------------- */

.pub-filtros {
    background: var(--pub-cartao-fundo);
    padding-block: 20px 29px;
}

.pub-filtros__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.pub-busca {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    background: var(--faixa-clara);
    border-radius: 8px;
    overflow: hidden;
    width: min(100%, 1003px);        /* medido */
    height: 70px;                    /* medido */
    margin-inline: auto;
}

/**
 * O anel de foco pertence à CAIXA, não ao campo.
 *
 * Campo e lupa são duas colunas de um grid. Um anel no <input> fecha na divisa
 * das colunas -- ou seja, ANTES da lupa -- e o resultado parece defeito: meia
 * caixa acesa. Com :focus-within o anel nasce no contêiner e envolve os dois,
 * venha o foco do campo ou do botão.
 *
 * 🔴 box-shadow inset, e não outline: a sombra acompanha o border-radius em
 * todo navegador; o outline só passou a acompanhar no Safari 16.4 -- antes
 * disso desenharia um retângulo de cantos vivos por cima dos cantos redondos.
 * Como o inset é pintado acima do fundo do contêiner mas abaixo dos filhos, e
 * campo e botão têm fundo transparente, ele aparece inteiro.
 */
.pub-busca:focus-within {
    box-shadow: inset 0 0 0 2px var(--lima-escuro);
}

/**
 * No modo de alto contraste do Windows a sombra é descartada pelo sistema.
 * Sem esta regra o foco ficaria INVISÍVEL justamente para quem mais depende
 * dele, então ali -- e só ali -- volta o outline, na cor do próprio sistema.
 */
@media (forced-colors: active) {
    .pub-busca:focus-within {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }
}

.pub-busca__campo {
    border: 0;
    background: transparent;
    padding: 0 0 0 48px;             /* texto do placeholder em x=266,9, campo em 219 */
    font-family: var(--fonte);
    font-size: 21px;                 /* medido */
    color: var(--verde-escuro);
    min-width: 0;
    height: 100%;
}
.pub-busca__campo::placeholder { color: var(--verde-escuro); opacity: .8; }
/* o anel é da caixa (.pub-busca:focus-within); aqui só se cala o do navegador */
.pub-busca__campo:focus { outline: none; }

/* a lupa do layout e cheia e escura, encostada a direita (x 1160..1190) */
.pub-busca__botao {
    border: 0;
    background: transparent;
    color: var(--verde-escuro);
    font-size: 26px;
    padding: 0 31px;                 /* 1221 - 1190 */
    cursor: pointer;
    line-height: 1;
    display: grid;
    place-items: center;
    height: 100%;
}
.pub-busca__botao:hover { color: var(--lima-escuro); }
.pub-busca__botao:focus-visible { outline: none; }

.pub-filtros__lista {
    margin-top: 21px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;                        /* vao medido */
}

/**
 * Cada pastilha e um <select> de verdade, so que vestido.
 *
 * O rotulo ("Tipo de Publicação") e a PRIMEIRA <option>, com valor vazio --
 * e assim que o layout mostra o controle antes de qualquer escolha, e assim
 * o proprio navegador cuida da lista, do teclado e do toque. Desenhar uma
 * lista propria em <div> custaria acessibilidade sem ganhar nada aqui.
 */
.pub-filtro {
    appearance: none;
    height: 27px;                    /* medido */
    border: 1px solid #8FC68A;       /* cor medida */
    border-radius: 4px;
    background: transparent;
    color: #8FC68A;
    font-family: var(--fonte);
    font-size: 14px;                 /* medido */
    font-weight: 700;
    line-height: 1;
    padding: 0 30px 0 14px;          /* recuo esquerdo medido: 405,3 - 391 */
    cursor: pointer;

    /**
     * O chevron: traço fino com pontas arredondadas, em SVG embutido.
     *
     * Antes eram dois `linear-gradient` formando um triângulo CHEIO -- truque
     * antigo, que fica pesado e serrilhado. O SVG é vetor: fica nítido em
     * qualquer tela e em qualquer zoom, e desenha o traço fino do layout.
     *
     * Embutido como data URI de propósito: uma requisição a menos, e o ícone
     * não some se o arquivo for movido de pasta.
     */
    background-image: var(--pub-chevron);
    background-position: right 12px center;
    background-size: 10px 6px;
    background-repeat: no-repeat;
}

/**
 * A lista NATIVA (quando o JavaScript não roda).
 *
 * 🔴 A lista de um <select> é desenhada pelo SISTEMA OPERACIONAL, não pela
 * página. Cor de fundo e do texto o Chrome respeita; a faixa de seleção, o
 * espaçamento, o canto arredondado e a sombra, não -- e o Safari ignora tudo.
 *
 * Por isso estas regras são só o mínimo para a lista nativa ficar legível.
 * A lista bonita, na paleta do site, é a de baixo (.pub-lista), montada pelo
 * combo.js sobre este mesmo <select>.
 */
.pub-filtro option { color: var(--verde-escuro); background: var(--branco); }

.pub-filtro:hover { border-color: var(--lima); color: var(--lima); background-image: var(--pub-chevron-lima); }
.pub-filtro:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }

/**
 * Pastilha com escolha ativa fica visivelmente diferente das demais.
 *
 * ⚠️ A classe vem do PHP, e nao de :valid. Um <select> sem "required" e SEMPRE
 * :valid -- inclusive com a opcao vazia escolhida --, entao aquela regra
 * pintaria as quatro pastilhas como se todas estivessem filtrando. Parece
 * funcionar na tela em que ha um filtro ativo, e engana justamente ali.
 */
.pub-filtro--ativo {
    border-color: var(--lima);
    color: var(--lima);
    background-image: var(--pub-chevron-lima);
}

/* --------------------------------------------------------------------------
   COMBO PRÓPRIO — a pastilha e a lista na paleta do site

   Montado pelo combo.js a partir do <select> real, que continua na página
   (escondido) e segue sendo quem guarda o valor e vai no formulário.

   🔴 Sem JavaScript nada disto existe e o <select> nativo aparece normalmente.
   Por isso o HTML entregue pelo servidor traz o <select> de verdade, e não uma
   pilha de <div> que só funcionaria com script.
   -------------------------------------------------------------------------- */

/* o <select> some só depois que o combo está montado -- nunca antes */

/**
 * 🔴 `padding: 0; border: 0` NÃO é enxerto: sem eles a página TRANSBORDAVA.
 *
 * O `.pub-filtro` acima dá padding e borda à pastilha. Com `box-sizing:
 * border-box`, a largura usada nunca fica abaixo de padding + borda: o
 * `width: 1px` virava **44px de verdade**. E como o elemento é absoluto sem
 * `left`, ele ficava na posição estática -- no fim da linha de pastilhas --
 * empurrando a rolagem horizontal 19px além da tela em 390px de largura.
 *
 * Invisível, mas ocupando lugar. Só apareceu quando eu medi `scrollWidth`
 * contra `clientWidth`; de olho, a página parecia perfeita.
 */
.pub-filtro--substituido {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pub-combo {
    position: relative;
    display: inline-block;
}

/* o botão repete exatamente a pastilha medida no PDF */
.pub-combo__botao {
    height: 27px;
    border: 1px solid var(--pub-borda-filtro);
    border-radius: 4px;
    background: transparent;
    color: var(--pub-borda-filtro);
    font-family: var(--fonte);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    padding: 0 30px 0 14px;
    cursor: pointer;
    white-space: nowrap;
    /**
     * 🔴 10/09/2026 -- o texto do botão é o NOME da opção escolhida
     * (combo.js troca o rótulo fixo pelo valor selecionado), não um rótulo
     * curto fixo. No mobile o botão vira `width:100%` de uma célula estreita
     * (ver @media 767.98px abaixo) -- sem isto, um nome comprido (ex.: um
     * autor de coluna) vazaria pra fora do contorno arredondado em vez de
     * cortar com reticências.
     */
    overflow: hidden;
    text-overflow: ellipsis;

    background-image: var(--pub-chevron);
    background-position: right 12px center;
    background-size: 10px 6px;
    background-repeat: no-repeat;
}

.pub-combo__botao:hover {
    border-color: var(--lima);
    color: var(--lima);
    background-image: var(--pub-chevron-lima);
}
.pub-combo__botao:focus-visible { outline: 2px solid var(--lima); outline-offset: 2px; }

/* com filtro escolhido, igual à regra da pastilha nativa */
.pub-combo--ativo .pub-combo__botao {
    border-color: var(--lima);
    color: var(--lima);
    background-image: var(--pub-chevron-lima);
}

/* lista aberta: a pastilha acompanha, para ficar claro de qual lista se trata */
.pub-combo--aberto .pub-combo__botao {
    border-color: var(--lima);
    color: var(--lima);
    background-image: var(--pub-chevron-lima);
}

/* o filtro que ainda não tem fonte de dados -- ver o comentário na view */
.pub-combo--sem-dado { opacity: .45; }
.pub-combo--sem-dado .pub-combo__botao { cursor: not-allowed; }
.pub-combo__botao:disabled:hover {
    border-color: var(--pub-borda-filtro);
    color: var(--pub-borda-filtro);
    background-image: var(--pub-chevron);
}

.pub-lista {
    position: absolute;
    z-index: 40;
    top: calc(100% + 6px);
    left: 0;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;

    background: var(--pub-lista-fundo);
    border: 1px solid var(--pub-borda-filtro);
    border-radius: 6px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
}

/**
 * A lista abre para a ESQUERDA quando a pastilha está perto da borda direita.
 * Sem isto, a última pastilha empurraria a página para o lado no celular.
 */
.pub-combo--esquerda .pub-lista { left: auto; right: 0; }

.pub-lista__item {
    padding: 8px 14px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    color: var(--faixa-clara);
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* a contagem "(29)" fica discreta, como informação secundária */
.pub-lista__conta {
    font-weight: 500;
    color: var(--pub-borda-filtro);
    font-variant-numeric: tabular-nums;
}

/**
 * Um estado visual só para "onde o teclado/mouse está", separado de "o que
 * está escolhido" -- são coisas diferentes, e misturá-las faz o usuário de
 * teclado perder a referência de onde estava.
 */
.pub-lista__item--focado {
    background: var(--lima);
    color: var(--verde-escuro);
}
.pub-lista__item--focado .pub-lista__conta { color: var(--verde-escuro); }

.pub-lista__item--escolhido { color: var(--lima); }
.pub-lista__item--escolhido.pub-lista__item--focado { color: var(--verde-escuro); }

/* a opção vazia ("Tipo de Publicação") é o "todos" -- separada das demais */
.pub-lista__item--vazio {
    border-bottom: 1px solid rgba(143, 198, 138, .28);
    border-radius: 4px 4px 0 0;
    margin-bottom: 4px;
    font-style: italic;
}

/* barra de rolagem discreta, na paleta */
.pub-lista { scrollbar-width: thin; scrollbar-color: var(--pub-borda-filtro) transparent; }
.pub-lista::-webkit-scrollbar { width: 8px; }
.pub-lista::-webkit-scrollbar-thumb { background: var(--pub-borda-filtro); border-radius: 4px; }
.pub-lista::-webkit-scrollbar-track { background: transparent; }

/* o filtro sem fonte de dados ainda -- ver o comentario na view */
.pub-filtro--sem-dado { opacity: .45; cursor: not-allowed; }

/**
 * ---------------------------------------------------------------------------
 * VARIANTE "INSTITUCIONAL" DO COMBO -- #214138, não o lima padrão acima
 * ---------------------------------------------------------------------------
 * Nasceu em 08/09/2026 no combo do "Quem é Quem" (decisão do Jonh entre
 * `#8FC68A`/lima, o padrão desta folha, e `#214138`, a cor institucional) e
 * foi estendida no mesmo dia para o filtro de ano/mês/dia de `/noticias`, a
 * pedido dele -- "o mesmo padrão que usamos no quem é quem". Fica AQUI, e
 * não numa folha por página, porque agora são duas páginas usando: `.pub-
 * filtro`/`.pub-combo__botao` moram aqui, e a variante devia morar junto.
 *
 * ⚠️ NÃO é a paleta de `legislacoes.css` (que também é #214138/#163029) --
 * aquela é local aquela folha, carregada só nas páginas de Legislação, e foi
 * justamente importá-la à toa noutra página que vazou essa cor sem querer
 * numa rodada anterior desta mesma tarefa (ver o catálogo de armadilhas).
 * Esta aqui é a variante OFICIAL, para quem realmente precisar da cor
 * institucional em vez do lima -- basta a classe `.filtro-institucional` no
 * `<form>` ou `<select>`, sem depender de importar folha nenhuma.
 *
 * `.pub-combo--ativo` ENTRA na regra escura aqui, ao contrário do Quem é
 * Quem: ali o combo nunca tem opção vazia (sempre uma categoria escolhida,
 * então "ativo" fica sempre ligado e não pode ganhar o tom mais escuro sem
 * apagar o repouso); aqui EXISTE "Todos os anos" vazio, então "ativo" quer
 * dizer de verdade "a pessoa escolheu um período" -- e ganhar o mesmo tom de
 * quem está passando o mouse/com o teclado é o comportamento certo.
 */
.filtro-institucional .pub-filtro,
.filtro-institucional .pub-combo__botao {
    border-color: var(--verde-escuro);
    color: var(--verde-escuro);
    background-image: var(--pub-chevron-institucional);
}

.filtro-institucional .pub-filtro:hover,
.filtro-institucional .pub-combo__botao:hover,
.filtro-institucional .pub-combo--ativo .pub-combo__botao,
.filtro-institucional .pub-combo--aberto .pub-combo__botao,
.filtro-institucional .pub-filtro--ativo {
    border-color: #163029;
    color: #163029;
    background-image: var(--pub-chevron-institucional-escuro);
}

.filtro-institucional .pub-filtro:focus-visible,
.filtro-institucional .pub-combo__botao:focus-visible { outline-color: #163029; }

/* --------------------------------------------------------------------------
   RESULTADOS DA BUSCA
   Nao existem no PDF: o layout so desenha a vitrine. A grade segue a mesma
   linguagem dos cartoes (fundo escuro, capa, titulo branco) para a pagina
   nao parecer outra ao filtrar.
   -------------------------------------------------------------------------- */

.pub-resultados {
    background: var(--pub-fundo-destaque);
    padding-block: 40px 52px;
}

.pub-resultados__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.pub-resultados__cabeca {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.pub-resultados__titulo {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.pub-resultados__limpar {
    font-size: 16px;
    font-weight: 600;
    color: var(--verde-escuro);
    text-decoration: none;
    border-bottom: 2px solid var(--lima-escuro);
    padding-bottom: 2px;
}
.pub-resultados__limpar:hover { color: var(--lima-escuro); }

.pub-resultados__vazio {
    margin: 0;
    font-size: 19px;
    line-height: 1.4;
    color: var(--verde-escuro);
}

.pub-grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 25px;
}

.pub-item {
    display: flex;
    flex-direction: column;
    padding: 16px;
    background: var(--pub-cartao-fundo);
    border-radius: 4px;
}

.pub-item__capa img {
    display: block;
    width: 100%;
    height: 252px;
    object-fit: contain;             /* capa de livro nao pode ser cortada */
    background: var(--pub-capa-fundo);
    border-radius: 2px;
    margin-bottom: 14px;
}

.pub-item__titulo {
    margin: 0;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--branco);
    overflow-wrap: anywhere;
}
.pub-item__titulo a { color: inherit; text-decoration: none; }
.pub-item__titulo a:hover { text-decoration: underline; }

.pub-item__subtitulo {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
    overflow-wrap: anywhere;
}

.pub-item__pe {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--lima);
}

.pub-item__restrita {
    padding: 2px 8px;
    border: 1px solid var(--lima);
    border-radius: 3px;
    font-size: 12px;
}

/* --------------------------------------------------------------- paginas -- */

.pub-paginas {
    margin-top: 38px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.pub-paginas__n,
.pub-paginas__seta {
    min-width: 40px;
    height: 40px;                    /* alvo de toque confortavel */
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--verde-escuro);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--verde-escuro);
    text-decoration: none;
}
.pub-paginas__n:hover,
.pub-paginas__seta:hover { background: var(--verde-escuro); color: var(--branco); }

.pub-paginas__n--atual {
    background: var(--verde-escuro);
    color: var(--lima);
    cursor: default;
}

.pub-paginas__reticencia { color: var(--verde-escuro); padding: 0 2px; }

/* ----------------------------------------------------------- DESTAQUE ---- */

.pub-destaque {
    background: var(--pub-fundo-destaque);
    padding-block: 40px;
}

/**
 * 🔴 SEM COLUNA DE IMAGEM DESDE 03/09/2026 -- pedido do Jonh: "teste sem
 * miniaturas". Até aqui esta era uma grade de duas colunas (capa 300px +
 * texto); sem a capa, vira só o bloco de texto. Guardado por escrito porque
 * já foi ida e volta duas vezes na mesma tarde (capa real -> tumblr padrão
 * -> sem capa nenhuma): se voltar, o histórico está aqui.
 */
.pub-destaque__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.pub-selo {
    display: inline-block;
    margin: 0 0 26px;
    padding: 9px 22px;               /* caixa medida: 169 x 40 */
    background: var(--verde-escuro);
    color: var(--lima);
    font-size: 15px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-radius: 3px;
}

.pub-destaque__titulo {
    margin: 0;
    font-size: 34px;                 /* medido */
    line-height: 1.15;
    font-weight: 700;
    color: var(--pub-capa-fundo);
}
.pub-destaque__titulo a { color: inherit; text-decoration: none; }
.pub-destaque__titulo a:hover { text-decoration: underline; }

.pub-destaque__resumo {
    margin: 18px 0 30px;
    max-width: 760px;
    font-size: 20px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 24 */
    font-weight: 500;
    color: var(--pub-capa-fundo);
}

/* ------------------------------------------------------------ CARTOES ---- */

.pub-recentes {
    background: var(--pub-fundo-destaque);
    padding-block: 0 46px;
}

.pub-recentes__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.pub-cartoes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 25px;                       /* vao medido: 752,6 - 727,4 */
}

/**
 * 🔴 MINIATURA VOLTOU SÓ AQUI em 03/09/2026 -- ver o comentário na view.
 * O Destaque (`.pub-destaque__interno`, acima) ficou sem imagem por decisão
 * do Jonh; estes 4 cartões voltaram a ter, por isso a grade de duas colunas
 * volta só aqui.
 */
.pub-cartao {
    display: grid;
    grid-template-columns: 143px minmax(0, 1fr);   /* capa medida: 142,5 */
    gap: 25px;                                     /* 320,8 - 295,5 */
    padding: 14px 16px;                            /* 1140,6 - 1126,6 */
    background: var(--pub-cartao-fundo);
    border-radius: 4px;
}

/**
 * Coluna fixa no texto -- não no auto-placement -- pelo mesmo motivo já
 * documentado antes: sem isto, um cartão sem capa (comum no Blog) ficaria
 * com o texto sozinho auto-posicionado na coluna ESTREITA de 143px, e o
 * resultado seria o mesmo "espremido" já corrigido uma vez.
 */
.pub-cartao__texto {
    grid-column: 2;
}

/* sem capa nenhuma: a grade vira uma coluna só, e o texto ocupa a largura toda */
.pub-cartao--sem-capa {
    grid-template-columns: minmax(0, 1fr);
}
.pub-cartao--sem-capa .pub-cartao__texto {
    grid-column: 1;
}

.pub-cartao__capa {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pub-cartao__capa img {
    display: block;
    width: 143px;
    height: 200px;                   /* medido */
    object-fit: contain;
    background: var(--pub-capa-fundo);
    border-radius: 2px;
}

/**
 * A "capa" do Blog é retrato do AUTOR, não capa de documento -- ver o
 * cabeçalho de BlogTable. Avatar redondo, menor que o quadro reservado
 * (143x200), para não esticar um rosto numa moldura de livro.
 */
.pub-cartao__capa img.pub-avatar-autor {
    width: 110px;
    height: 110px;
    object-fit: cover;
    border-radius: 50%;
    background: none;
}

.pub-cartao__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/**
 * 🔴 NASCEU EM 02/09/2026 junto com o destaque unificado -- diz de qual dos
 * 4 tipos (Blog/Pesquisa/Análise de Cenário/Editora) é cada "documento
 * recente", já que os cartões passaram a misturar as quatro fontes.
 *
 * 🔴 VIROU UMA "FLAG" EM 03/09/2026 -- pedido do Jonh: o cartão inteiro tinha
 * ganho o pastel do tipo (fundo claro + texto verde-escuro) em 03/09, e ele
 * achou forte demais -- pediu para voltar ao padrão verde/branco de antes e
 * deixar SÓ esta etiqueta na cor do tipo. Por isso agora é uma pastilha
 * (fundo colorido + canto arredondado), e não mais o cartão inteiro -- ver
 * `.pub-cartao__tipo--{tipo}` logo abaixo, mesma paleta de sempre.
 */
.pub-cartao__tipo {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 8px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--verde-escuro);
    background: var(--lima);
}

.pub-cartao__tipo--blog     { background: #FBE0C2; }
.pub-cartao__tipo--pesquisa { background: #D0E6F7; }
.pub-cartao__tipo--cenario  { background: #C9ECDF; }
.pub-cartao__tipo--editora  { background: #EBEDA0; }

.pub-cartao__titulo {
    margin: 0;
    font-size: 21px;                 /* medido */
    line-height: 1.05;               /* linhas a cada 22 */
    font-weight: 700;
    color: var(--branco);
    overflow-wrap: anywhere;
}
.pub-cartao__titulo a { color: inherit; text-decoration: none; }
.pub-cartao__titulo a:hover { text-decoration: underline; }

/**
 * Só quando NÃO há subtítulo o título é o último texto antes do botão -- ver
 * `pub-cartao__titulo--ultimo` no PHP (`$temSubtitulo`). Garante o mesmo
 * respiro fixo de baixo que `.pub-cartao__subtitulo` garante quando ele
 * existe, sem essa margem "vazar" para o espaço título↔subtítulo (que fica
 * junto de propósito, 6px) quando os dois estão presentes.
 */
.pub-cartao__titulo--ultimo { margin-bottom: 24px; }

.pub-cartao__subtitulo {
    margin: 6px 0 24px;
    font-size: 21px;                 /* mesmo corpo do titulo, peso menor */
    line-height: 1.2;
    font-weight: 500;
    color: var(--branco);
    overflow-wrap: anywhere;
}

/**
 * 09/09/2026, 2ª rodada -- pedido do Jonh: o botão deve ficar na MESMA altura
 * (rente ao rodapé do cartão) nos 4 cartões, mesmo quando um título ocupa 2
 * linhas e o vizinho na mesma fileira só 1 (imagem de referência). O respiro
 * mínimo fixo (24px) já não colava mais o botão no texto -- ver acima -- mas
 * sozinho ele não empurra o botão até o fim do cartão quando sobra altura.
 *
 * Por isso volta a ser `margin-top: auto`, SOMADO ao respiro fixo de baixo
 * do título/subtítulo (que não colapsa: `.pub-cartao__texto` é flex, margens
 * de itens flex não se fundem). Nas duas colunas da grade (`.pub-cartoes`),
 * a fileira toda vira da altura do cartão mais alto (`align-items: stretch`,
 * padrão do grid) -- o cartão mais curto ganha sobra de altura, e é essa
 * sobra que o `auto` consome para alinhar o botão com o do vizinho mais alto.
 * Quando os dois cartões da fileira têm a mesma altura (título do mesmo
 * tamanho), a sobra é zero e o resultado é idêntico ao respiro fixo de antes
 * -- não regride o ajuste anterior ("estão grudados").
 */
.pub-cartao .botao { margin-top: auto; align-self: flex-start; }

.pub-recentes__todas {
    margin: 46px 0 0;
    text-align: center;
}

/* --------------------------------------------------- TIPOS DE CONTEÚDO --- */
/**
 * 🔴 ATÉ 02/09/2026 ESTA FAIXA SE CHAMAVA "Inteligência de Mercado" e tinha
 * um título vertical numa coluna própria de 83px (o texto girado -- ver a
 * nota que ficava aqui) ao lado de 3 caixas. Pedido do Jonh: tirar o rótulo
 * e somar uma 4ª caixa (Editora). Sem título, `.pub-mercado__interno` não
 * precisa mais da coluna fixa -- é só o contêiner padrão do site.
 */
.pub-mercado {
    background: var(--pub-cartao-fundo);
    padding-block: 62px;             /* faixa de 389,7 no PDF */
}

.pub-mercado__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
}

.pub-frentes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;                       /* vao medido: 598,5 - 580,6 */
}

/**
 * 🔴 TUDO CENTRADO -- e isto foi MEDIDO, nao suposto.
 *
 * O cartao do meio vai de x=598,5 a 960,8, centro em 779,65; o icone dele vai
 * de 744,8 a 814,5, centro em 779,65. Igual nos outros dois. E as tres linhas
 * da descricao comecam em x diferentes (634,4 / 648,4 / 661,1) e terminam em x
 * diferentes -- o que so acontece com texto centralizado.
 *
 * Os vaos vao um a um em vez de um "gap" unico porque no layout eles NAO sao
 * iguais: 36 entre icone e titulo, 13 entre titulo e descricao.
 */
.pub-frente__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    /**
     * Topo 1551,9 - 1523,7 = 28. Base 1788,3 - 1765,6 = 23.
     *
     * 🔴 Os 29 laterais NAO sao chute nem sobra de medida: sao o meio da unica
     * faixa que reproduz as quebras de linha do layout. Medindo as frases com
     * a Noto Sans de verdade, so uma largura interna entre 299 e 310,5 px
     * quebra os tres cartoes onde o PDF quebra. Mais larga, o navegador puxa
     * "especialistas" para a linha de cima no primeiro cartao; mais estreita,
     * a descricao vira quatro linhas e o cartao cresce. 29 deixa 304 -- com
     * folga dos dois lados, para aguentar diferenca de renderizacao.
     */
    padding: 28px 29px 23px;
    border: 1px solid var(--lima);   /* borda medida: 1,2 */
    border-radius: 2px;
    color: var(--branco);
    text-decoration: none;
}
.pub-frente__link:hover { background: rgba(168, 230, 30, .08); color: var(--branco); }
.pub-frente__link:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

/**
 * O SVG vem do PDF numa tela de 76 x 76 comum aos tres (ver a parcial
 * icone-mercado.phtml). flex: none porque num flex column o navegador
 * encolheria o desenho quando o cartao ficasse apertado.
 */
.pub-frente__icone {
    width: 76px;
    height: 76px;
    flex: none;
    color: var(--lima);
}

.pub-frente__nome {
    margin: 36px 0 13px;             /* icone -> titulo -> descricao, medidos */
    font-size: 20px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
}

.pub-frente__descricao {
    font-size: 18px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 21,6 */
    font-weight: 500;
}

/* =============================== GALERIA + DOCUMENTOS ==================== */

/**
 * ⚠️ Esta faixa e MAIS LARGA que o resto da pagina, e nao e engano meu.
 * As duas caixas vao de x=65,4 a x=1374,6 -- 1309,2 -- enquanto o conteudo do
 * site usa 1170 (135..1305). Medi tres vezes por desconfianca. E assim no PDF.
 */
.pub-caixas {
    background: var(--branco);
    padding-block: 62px;             /* faixa de mercado termina em 1850,9; caixas comecam em 1868 */
}

.pub-caixas__interno {
    width: min(100% - 48px, 1309px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 685.7fr 597.2fr;   /* medidos */
    gap: 26.3px;                              /* 777,4 - 751,1 */
    align-items: stretch;
}

/**
 * Raio dos cantos: 16px, deduzido do caminho e nao chutado.
 *
 * Num retangulo arredondado o traco comeca em (x + r) e o ponto de controle do
 * ultimo canto cai em (x + r - 0,5523r). O menor x da primeira linha ficou 7,6
 * alem da borda, logo r = 7,6 / 0,4477 = 17,0 na galeria e 15,9 nos documentos.
 */
.pub-galeria,
.pub-docs {
    border-radius: 16px;
    display: flex;
    flex-direction: column;
}

/**
 * As duas caixas tem 396,8 de altura no PDF, e nao e coincidencia: cada uma tem
 * o proprio somatorio fechando no mesmo numero.
 *
 *   galeria   12,1 + 299,8 (mosaico) + 22,7 + 36,5 (botao) + 25,7 = 396,8
 *   docs      16,0 +  33,6 (titulo)  + 15,1 + 261,7 (cartoes)
 *                                          + 13,8 + 36,5 + 20,1 = 396,8
 */
.pub-galeria {
    background: var(--pub-galeria-fundo);
    padding: 12px 13px 26px;         /* 1880,1 - 1868 = 12,1 ; (685,7 - 660) / 2 = 12,85 */
}
.pub-docs {
    background: var(--pub-docs-fundo);
    padding: 16px 16px 20px;         /* 1932,7 - 1868 e 793,2 - 777,4 = 15,8 */
}

/* -------- o mosaico -------- */
/**
 * Quatro colunas. As duas fotos maiores de baixo ocupam DUAS colunas cada --
 * e por isso a grade e de 4 e nao de 2: assim a fileira de cima e a de baixo
 * ficam alinhadas nas mesmas divisas, como no layout.
 */
/**
 * 🔴 `flex: 1` AQUI ERA O DEFEITO -- e o sintoma aparecia longe da causa.
 *
 * As duas caixas sao irmas num grid com align-items: stretch. Os documentos que
 * o banco devolve tem texto MAIS LONGO que o do layout, entao a caixa da
 * direita cresce; a da esquerda e esticada junto, para 565 em vez de 396,8.
 * Com `flex: 1` o mosaico engolia sozinho os 168 px sobrando e as fotos
 * pareciam "espalhadas" -- so que as fotos estavam certas (153,7 x 102,5),
 * quem estava errado era o vao entre as fileiras: 87 px em vez de 10,6.
 *
 * Sem `flex: 1` o mosaico fica no tamanho exato e a sobra vai para o vao acima
 * do botao (margin-top: auto), que e onde ela nao incomoda.
 */
.pub-mosaico {
    background: var(--branco);
    padding: 5px;                    /* 81,8 - 76,8 */
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10.6px 11.7px;              /* vao vertical 1998,2-1987,6 ; horizontal (649,7 - 4x153,65)/3 */
    flex: none;
}

.pub-mosaico__item {
    display: block;
    overflow: hidden;
    aspect-ratio: 153.7 / 102.5;     /* medido */
    background: var(--faixa-clara);
}
.pub-mosaico__item--grande {
    grid-column: span 2;
    aspect-ratio: 318.1 / 176.7;     /* medido */
}

/**
 * object-fit: cover e obrigatorio aqui: as fotos do acervo tem proporcoes
 * variadas, e sem isto uma foto em pe entraria esticada na celula deitada.
 */
.pub-mosaico__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}
.pub-mosaico__item:hover img { transform: scale(1.04); }
.pub-mosaico__item:focus-visible { outline: 3px solid var(--lima); outline-offset: 2px; }

/**
 * margin-top: auto prende o botao no rodape da caixa. O padding-top garante o
 * vao minimo do PDF mesmo quando nao sobra altura nenhuma para distribuir.
 */
.pub-caixas__acao {
    margin: 0;
    padding-top: 22.7px;             /* 2202,6 - 2179,9 */
    margin-top: auto;
    text-align: center;
}
.pub-docs .pub-caixas__acao { padding-top: 13.8px; }   /* 2208,2 - 2194,4 */

/**
 * ⚠️ `min-height` aqui nao adiantava nada: `.botao` do site.css fixa
 * `height: 46px`, e altura declarada ganha de altura minima. Tem de ser
 * `height` mesmo.
 */
.pub-caixas__acao .botao {
    font-size: 16px;                 /* medido */
    letter-spacing: .02em;
    height: 36.5px;                  /* 2239,1 - 2202,6 */
    border-radius: 5px;              /* 2,5 / 0,4477 = 5,6 */
}

/**
 * ⚠️ Os DOIS botoes escuros do PDF nao tem a mesma cor de texto, e isso nao e
 * descuido do layout:
 *
 *   "VER TODAS AS PUBLICAÇÕES DA EDITORA"  y 1415,1  texto #A8E61E (lima)
 *   "VER DOCUMENTOS"                       y 2233,0  texto #FFFFFF (branco)
 *
 * Por isso a regra e escopada aqui, e nao em .botao--escuro: mexer na classe
 * geral estragaria o botao da faixa de Recentes, que ja estava certo.
 */
.pub-docs .pub-caixas__acao .botao--escuro,
.pub-docs .pub-caixas__acao .botao--escuro:hover { color: var(--branco); }

.pub-caixas__vazio {
    margin: 0;
    padding: 40px 20px;
    text-align: center;
    color: var(--branco);
    opacity: .85;
}
.pub-docs .pub-caixas__vazio { color: var(--verde-escuro); }

/* -------- documentos -------- */

.pub-docs__titulo {
    margin: 0 0 15px;                /* 1932,7 - 1917,6 */
    font-size: 28px;                 /* medido */
    line-height: 1.2;                /* 33,6 -- fecha o somatorio da caixa */
    font-weight: 700;
    color: var(--verde-escuro);
    text-align: center;
}

.pub-docs__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 23.9px;                     /* 1087,1 - 1063,2 */
    flex: 1;
}

/**
 * 🔴 A COR DESTES CARTOES VEIO DA ARTE DE REFERENCIA, NAO DA MINHA LEITURA.
 *
 * Meu extrator le #1D2E29 (quase preto) para estes dois retangulos, e o texto
 * por cima como #214138 -- o que daria contraste de 1,27:1, ilegivel. Cheguei
 * a registrar isso como "defeito do layout". A imagem que o Jonathan mandou
 * mostra cinza claro com texto escuro, perfeitamente legivel.
 *
 * Ou seja: o defeito era da minha LEITURA (preenchimento por padrao/sombreado
 * que o interpretador nao resolve), nao do layout. Regra adotada: geometria
 * vem do PDF, cor vem da arte de referencia quando as duas divergirem.
 */
.pub-doc__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 21px 22px 12px;         /* 1969,6 - 1953,5 ; 2194,4 - 2182,3 */
    background: var(--pub-doc-fundo);
    color: var(--verde-escuro);
    text-decoration: none;
    text-align: center;
    border-radius: 0;                /* no PDF sao `re`: canto vivo, sem arco */
}
.pub-doc__link:hover { background: #CFCFCF; color: var(--verde-escuro); }
.pub-doc__link:focus-visible { outline: 2px solid var(--verde-escuro); outline-offset: 2px; }

/**
 * 🔴 O CORTE POR LINHAS E O QUE MANTEM A CAIXA NA ALTURA DO PDF.
 *
 * O cartao do layout tem 261,7 de alto porque o texto dele cabe em 3 linhas de
 * titulo + 8 de resumo. O que vem do banco e mais comprido -- e sem limite o
 * cartao empurra a caixa inteira (foi assim que ela chegou a 565).
 *
 * 3 x 22 + 9,2 + 8 x 19,2 + 21 + 12 = 261,7 -- exatamente a medida do PDF.
 *
 * ⚠️ Cartao COM selo de restrito ganha ~32 px que o layout nao previu (o PDF
 * nao tem nenhum documento restrito nos dois exemplos). Ali o resumo cai para
 * 6 linhas, senao o selo empurra a caixa de novo.
 */
.pub-doc__titulo {
    font-size: 18px;                 /* medido */
    line-height: 22px;               /* linhas a cada 22 -- valor absoluto, nao proporcao */
    font-weight: 700;
    margin-bottom: 9px;              /* 2028,7 - 2019,5 */

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.pub-doc__resumo {
    font-size: 16px;                 /* medido */
    line-height: 19.2px;             /* linhas a cada 19,2 */
    font-weight: 500;
    color: #3B4A45;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 8;
    line-clamp: 8;
    overflow: hidden;
}

.pub-doc__link:has(.pub-doc__selo) .pub-doc__resumo {
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

/**
 * O selo de restrito. bo_restrito = 1 significa "so associado logado ve" --
 * o documento aparece, mas avisado, para o visitante nao clicar e bater numa
 * tela de login sem entender por que.
 */
.pub-doc__selo {
    margin-top: auto;
    padding-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde-escuro);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* ================================== IASE / SIDDES ======================== */

/**
 * 🔴 A FAIXA E UM DEGRADE, e isto foi EXTRAIDO, nao escolhido a olho.
 *
 * Meu extrator de caminhos lia esta faixa como #214138 (verde-escuro), porque
 * ele so entende cor solida e mantem a ultima cor vista quando o preenchimento
 * e um sombreado. O degrade de verdade esta no objeto 44 do PDF:
 *
 *     ShadingType 2 (linear) · Coords 0 0 1 0 (horizontal) · DeviceRGB
 *     C0 = 0.788 0.863 0.647  ->  #C9DCA5
 *     C1 = 0.655 0.816 0.694  ->  #A7D0B1
 *
 * Faixa de largura total, y 2278,6 a 2687,4 (408,8 de altura).
 */
.pub-iase {
    background: linear-gradient(90deg, var(--pub-iase-degrade-ini) 0%, var(--pub-iase-degrade-fim) 100%);
    padding-block: 15px;             /* 2293,0 - 2278,6 */
}

/**
 * O cartao por dentro tem os 1170 do site: no PDF vai de 136,6 a 1302,9
 * -- 1166,3 --, o mesmo contorno do resto da pagina.
 */
/**
 * 🔴 AS DUAS METADES SAO PINTADAS AQUI, no proprio cartao, com um degrade de
 * PARADA SECA -- nao e um gradiente de verdade, e um corte em 64,42%.
 *
 * Antes quem pintava o verde era a `<div class="pub-iase__arte">` da coluna da
 * direita. Quando ela virou a `<img>` da ilustracao, o verde sumiu junto e o
 * que aparecia no lugar era o degrade da FAIXA, mais claro -- de longe passa
 * por certo. Com a cor no cartao, ela nao depende de existir elemento na
 * coluna.
 *
 *   751,4 / 1166,3 = 64,42%
 */
.pub-iase__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    grid-template-columns: 751.4fr 415.9fr;   /* medidos */
    border-radius: 24px;
    overflow: hidden;
    min-height: 378.7px;             /* 2671,7 - 2293,0 */
    background: linear-gradient(90deg,
        var(--pub-iase-claro) 0 64.42%,
        var(--pub-iase-verde) 64.42% 100%);
}

.pub-iase__texto {
    padding: 26px 40px 26px 62px;    /* texto comeca em x=198,7, faixa em 136,6 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pub-iase__logo {
    display: block;
    width: 284.85px;                 /* medido */
    height: auto;
    margin-bottom: 22px;
}

.pub-iase__titulo {
    margin: 0 0 16px;
    font-size: 24.9px;               /* medido */
    line-height: 1.2;                /* 2466,9 - 2437,0 = 29,9 */
    font-weight: 700;
    color: var(--verde-escuro);
}

.pub-iase__chamada {
    margin: 0 0 26px;
    max-width: 640px;
    font-size: 21.4px;               /* medido */
    line-height: 1.2;                /* linhas a cada 25,6 */
    font-weight: 500;
    color: var(--verde-escuro);
}

.pub-iase__acao { margin: 0; }

/* o botao do IASE tem verde proprio, mais claro que o institucional */
.botao--iase {
    background: var(--pub-iase-botao);
    color: var(--branco);
    border: 2px solid var(--pub-iase-botao);
    font-size: 16px;
}
.botao--iase:hover {
    background: var(--verde-escuro);
    border-color: var(--verde-escuro);
    color: var(--branco);
}

/**
 * ✅ A ilustracao e a logo da ABMES.
 *
 * 🔴 As duas ficam POSICIONADAS SOBRE O CARTAO, e nao dentro da coluna verde.
 * No PDF a ilustracao comeca em x=847 e a divisa entre as metades esta em 887:
 * ela **atravessa** a divisa em 40 px. Deixar a arte como conteudo da coluna
 * verde recortaria justamente a mao e o braco da mulher.
 *
 * As medidas vao em PORCENTAGEM do cartao (1166,3 x 378,7), nao em px, para
 * acompanharem a largura em qualquer tela. A altura sai sozinha do viewBox --
 * fixar as duas deformaria o desenho quando o texto ao lado reflui.
 */
.pub-iase__interno { position: relative; }

.pub-iase__arte {
    position: absolute;
    left: 60.91%;                    /* (847,0 - 136,6) / 1166,3 */
    bottom: 3.37%;                   /* (378,7 - 365,9) / 378,7 */
    width: 29.92%;                   /* 348,9 / 1166,3 */
    height: auto;

    /**
     * ⚠️ Sem isto a arte cobre a metade direita do cartao e engole o clique do
     * botao quando o texto e curto e ela sobe.
     */
    pointer-events: none;
}

.pub-iase__abmes {
    position: absolute;
    left: 87.54%;                    /* (1157,6 - 136,6) / 1166,3 */
    top: 82.78%;                     /* (2606,5 - 2293,0) / 378,7 */
    width: 10.10%;                   /* 117,9 / 1166,3 */
    height: auto;
    color: var(--branco);            /* no PDF os 6 caminhos sao brancos */
}

/* ================================= CHAMADA FINAL ========================= */

.pub-chamada {
    background: var(--faixa-clara);  /* #E1E9D4, medido */
    padding-block: 68px 38px;        /* 2755,8 - 2687,9 */
    position: relative;
    overflow: hidden;
}

.pub-chamada__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    position: relative;
}

/** O bloco inteiro e centrado NA PAGINA: os botoes vao de 440 a 1000, centro 720. */
.pub-chamada__texto { text-align: center; }

.pub-chamada__titulo {
    margin: 0 0 14px;
    font-size: 28px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
}

.pub-chamada__apoio {
    margin: 0 auto 34px;
    max-width: 900px;
    font-size: 22px;                 /* medido */
    line-height: 1.2;                /* 2824,6 - 2798,2 = 26,4 */
    font-weight: 500;
    color: var(--verde-escuro);
}

.pub-chamada__acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;                       /* 736,5 - 718,5 */
    justify-content: center;
}
.pub-chamada__acoes .botao { font-size: 18px; }

/**
 * O predio e MARCA D'AGUA: no PDF ele e desenhado em verde-escuro, mas aparece
 * quase apagado na arte. Por isso opacidade baixa aqui, e nao uma cor cravada
 * no SVG -- assim da para calibrar o tom sem mexer no desenho.
 *
 * aria-hidden ja esta no proprio SVG; pointer-events: none impede que ele
 * roube o clique dos botoes quando a tela for estreita.
 */
.pub-chamada__arte {
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 130.11px;                 /* medido */
    height: auto;
    color: var(--verde-escuro);
    opacity: .16;
    pointer-events: none;
}

/* ========================================================================== */
/*  RESPONSIVO                                                                */
/*  Os cortes seguem os mesmos do resto do site (991,98 e 767,98), para o      */
/*  comportamento nao mudar de pagina para pagina.                            */
/* ========================================================================== */

@media (max-width: 991.98px) {
    .pub-hero { padding-block: 32px 28px; }   /* mesmo passo de .ec-hero */
    .pub-hero__interno { grid-template-columns: minmax(0, 1fr); }
    .pub-hero__arte { display: none; }
    .pub-hero__titulo { font-size: 54px; }
    .pub-hero__chamada { font-size: 22px; }

    .pub-destaque__interno { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
    .pub-destaque__capa img { width: 220px; height: 294px; }
    .pub-destaque__titulo { font-size: 28px; }

    .pub-cartoes { grid-template-columns: minmax(0, 1fr); }

    .pub-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .pub-frentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* as duas caixas passam a ficar uma sobre a outra */
    .pub-caixas__interno { grid-template-columns: minmax(0, 1fr); gap: 26px; }

    /**
     * A faixa do IASE tambem empilha, e a metade verde some: sem a ilustracao
     * ela seria so uma tarja de cor ocupando meia tela de celular.
     */
    .pub-iase__interno { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .pub-iase__texto { padding: 32px 28px; }

    /**
     * 🔴 As TRES linhas abaixo andam juntas. Esconder so a ilustracao deixaria
     * a parada seca do fundo desenhando uma tarja verde vazia em 64,42% da
     * largura, e a logo da ABMES flutuando por cima do texto -- as duas estao
     * posicionadas em porcentagem do cartao, que aqui nao tem mais duas metades.
     */
    .pub-iase__interno { background: var(--pub-iase-claro); }
    .pub-iase__arte  { display: none; }
    .pub-iase__abmes { display: none; }
}

@media (max-width: 767.98px) {
    .pub-hero__titulo { font-size: 40px; }
    .pub-hero__apoio { font-size: 17px; }
    .pub-hero__chamada { font-size: 19px; }
    .pub-hero__acoes { gap: 14px; }
    .pub-hero__acoes .botao { width: 100%; justify-content: center; }

    /**
     * No celular a linha de quatro pastilhas nao cabe: elas quebram em duas
     * por linha e crescem, para o alvo de toque nao ficar menor que o dedo.
     * A altura sobe de 27 para 40 pelo mesmo motivo.
     */
    .pub-busca { height: 56px; }
    .pub-busca__campo { padding-left: 18px; font-size: 16px; }
    .pub-busca__botao { padding: 0 16px; min-width: 48px; }

    .pub-frentes { grid-template-columns: minmax(0, 1fr); }

    .pub-filtros__lista { gap: 8px; }
    .pub-filtro {
        flex: 1 1 calc(50% - 4px);
        height: 40px;
        font-size: 13px;
        padding-left: 12px;
    }

    /**
     * 🔴 A mesma regra PRECISA valer para o combo montado pelo script.
     *
     * Quando o `combo.js` roda, quem aparece na tela é o `.pub-combo__botao`,
     * e não o `<select>`. A regra acima mirava só o `.pub-filtro`: no celular
     * COM JavaScript as pastilhas continuavam com os 27px do desktop, ou seja,
     * o conserto de toque valia justamente onde ninguém o via.
     */
    .pub-combo { flex: 1 1 calc(50% - 4px); display: flex; }
    .pub-combo__botao {
        width: 100%;
        height: 40px;
        font-size: 13px;
        padding-left: 12px;
    }

    .pub-destaque__interno { grid-template-columns: minmax(0, 1fr); }
    .pub-destaque__capa img { width: 100%; max-width: 260px; height: auto; }
    .pub-destaque__titulo { font-size: 24px; }
    .pub-destaque__resumo { font-size: 17px; }

    .pub-cartao { grid-template-columns: minmax(0, 1fr); }
    .pub-cartao__capa img { width: 100%; max-width: 200px; height: auto; }
    .pub-cartao__titulo,
    .pub-cartao__subtitulo { font-size: 18px; }

    .pub-frente__link { padding: 24px 20px; }

    /**
     * No celular o mosaico vira 2 colunas. As fotos "grandes" deixam de ocupar
     * duas colunas -- com 2 colunas isso as faria ocupar a largura inteira e a
     * caixa ficaria alta demais para rolar.
     */
    .pub-mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pub-mosaico__item--grande { grid-column: span 1; aspect-ratio: 153.7 / 102.5; }

    .pub-docs__lista { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pub-docs__titulo { font-size: 24px; }
    .pub-doc__link { padding: 20px 18px; }

    /**
     * 🔴 Os 36,5 do PDF sao medida de tela grande. No celular o botao volta a
     * 46 px: alvo de toque abaixo de ~40 px erra com facilidade, e a fidelidade
     * ao layout nao vale um botao que o dedo nao acerta.
     *
     * E com uma coluna so nao ha caixa irma esticando ninguem -- entao o corte
     * de linhas do resumo pode sair, e o texto aparece inteiro.
     */
    .pub-caixas__acao .botao { height: 46px; }
    .pub-doc__titulo,
    .pub-doc__resumo,
    .pub-doc__link:has(.pub-doc__selo) .pub-doc__resumo {
        display: block;
        -webkit-line-clamp: none;
        line-clamp: none;
        overflow: visible;
    }

    .pub-iase__titulo { font-size: 21px; }
    .pub-iase__chamada { font-size: 18px; }
    .pub-iase__logo { width: 220px; }

    .pub-chamada { padding-block: 40px 30px; }
    .pub-chamada__titulo { font-size: 22px; }
    .pub-chamada__apoio { font-size: 18px; }
    .pub-chamada__acoes .botao { width: 100%; justify-content: center; }
    .pub-chamada__arte { display: none; }

    .pub-resultados__titulo { font-size: 22px; }
    .pub-grade { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .pub-item__capa img { height: 220px; }
    .pub-paginas__seta span { display: none; }   /* fica so a seta, para caber */
}

/* ===================================================== TODAS AS PUBLICAÇÕES */
/* /publicacoes/todas -- nasceu em 02/09/2026. .recentes/.recentes__cabeca/
   .pub-filtro/.filtro-periodo* já vêm de internas.css e daqui mesmo; só a
   grade de cartões (sem capa, ver o cabeçalho da parcial) é própria. Mesma
   geometria de .leg-cartao (legislacoes.css), prefixo próprio para não
   confundir leitura de código entre as duas seções. */

.pubtodas-grade {
    list-style: none;
    margin: 0 0 48px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.pubtodas-cartao {
    display: flex;
    background: var(--branco);
    border: 1px solid rgba(33, 65, 56, .18);
    border-radius: 8px;
    padding: 24px;
}

.pubtodas-cartao__texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.pubtodas-cartao__tipo {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 5px 10px;
    background: var(--faixa-clara);
    color: var(--verde-escuro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    border-radius: 4px;
}

/* uma cor por tipo -- mesmo espírito de .leg-selo--N em legislacoes.css */
.pubtodas-tipo--blog     { background: #FBE0C2; }
.pubtodas-tipo--pesquisa { background: #D0E6F7; }
.pubtodas-tipo--cenario  { background: #C9ECDF; }
.pubtodas-tipo--editora  { background: #EBEDA0; }

.pubtodas-cartao__titulo {
    margin: 0;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--verde-escuro);
    overflow-wrap: anywhere;
}
.pubtodas-cartao__titulo a { color: inherit; text-decoration: none; }
.pubtodas-cartao__titulo a:hover { text-decoration: underline; }

.pubtodas-cartao__data {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    color: var(--cinza-azulado);
    font-size: 14px;
    font-weight: 600;
}

.pubtodas-cartao__resumo {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.4;
    font-weight: 500;
    color: #3B4A45;
    overflow-wrap: anywhere;
}

.pubtodas-cartao__restrita {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin: 14px 0 0;
    padding: 6px 10px;
    border-radius: 4px;
    background: var(--verde-escuro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}
.pubtodas-cartao__restrita .bi-lock-fill { font-size: 11px; }

.pubtodas-cartao__botao { margin-top: 14px; align-self: flex-start; }

@media (max-width: 1199.98px) {
    .pubtodas-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .pubtodas-grade { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* ========================= ALVO DE TOQUE ============================= *
   Mesma condicao "OU" das outras folhas: por largura pega celular e tablet,
   por `pointer: coarse` pega o notebook com tela sensivel ao toque.
   ===================================================================== */

@media (max-width: 991.98px), (pointer: coarse) {
    /**
     * As pastilhas do filtro tem 27px no layout -- medida de tela grande, com
     * mouse. Aqui sobem para 40 sem mudar de lugar nem de quantidade por
     * linha (isso so acontece abaixo de 768).
     *
     * ⚠️ As DUAS precisam da regra: `.pub-filtro` e o <select> de quem esta
     * sem JavaScript, `.pub-combo__botao` e o que aparece com ele.
     */
    .pub-filtro,
    .pub-combo__botao { height: 40px; }
}