/* ==========================================================================
   ASSOCIE-SE  --  /associe-se e as 6 páginas de detalhe que ela abre
   --------------------------------------------------------------------------
   Sem PDF de layout aprovado para esta frente -- o conteúdo veio de
   https://abmes.org.br/associese (e das 8 páginas que ela linka), colhido
   ponta a ponta em 03/09/2026 (ver Application\Model\AssocieSe). O desenho
   aqui segue a linguagem visual já em uso no resto do portal (mesma paleta,
   mesmos `.botao`, mesmo `--largura-conteudo` de 1170px de internas.css) --
   não é medição de arquivo, é adequação ao padrão já aprovado.
   ========================================================================== */

:root {
    --asc-faixa:     #E1E9D4;   /* mesma faixa clara de Serviços/Eventos */
    --asc-exclusivo: #1D2E29;   /* faixa escura do "Exclusivo para associados" */
}

/* ============================ VANTAGENS (hero) ============================ */

/**
 * 🔴 10/09/2026 -- cartão pedido pelo Jonh (imagem de referência: cartão
 * branco, itens com marca de verificação, faixa clara no rodapé) para a
 * hero de /associe-se, logo abaixo do texto e antes dos 8 azulejos. Mesma
 * família de cartão já usada no site (`.ctt-form`/`.ctt-lado`: fundo branco,
 * canto arredondado, sombra suave) -- só a faixa no RODAPÉ (em vez do topo)
 * é o que muda, para bater com a referência.
 */
.asc-vantagens {
    margin-top: 32px;
    max-width: 760px;
    padding: 28px 32px 24px;
    background: var(--branco);
    border-radius: 12px 12px 4px 4px;
    border-bottom: 6px solid var(--asc-faixa);
    box-shadow: 0 12px 32px rgba(33, 65, 56, .1);
}

.asc-vantagens__titulo {
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
}

.asc-vantagens__lista {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
}

.asc-vantagens__lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--verde-escuro);
}

.asc-vantagens__lista i {
    flex: none;
    margin-top: 2px;
    font-size: 17px;
    color: var(--lima-escuro);
}

/* ================================== HERO ================================= */

.asc-hero {
    background: var(--branco);
    padding-block: 44px 36px;    /* mesmo ritmo de .ec-hero/.pub-hero */
}

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

.asc-hero__titulo {
    margin: 0 0 20px;
    font-size: 56px;
    line-height: 1.1;
    font-weight: 700;
    color: var(--verde-escuro);
    letter-spacing: -.01em;
}

.asc-hero__texto {
    /**
     * 🔴 O max-width e SO do texto, nao do `.asc-hero__interno` inteiro
     * (como estava) -- pedido do Jonh em 08/09/2026: o `78ch` ali dentro
     * recuava e recentralizava a caixa toda, e o TITULO ("Institucional",
     * "Associe-se") saia da borda padrao de 1170px (mesma do resto do site,
     * ex.: Publicacoes em x=115) e ficava ~220px mais a direita -- unico
     * titulo do portal fora do alinhamento comum. Aqui, so o paragrafo
     * ganha a largura de leitura confortavel; o titulo acompanha a grade.
     */
    max-width: 78ch;
    margin: 0 0 16px;
    font-size: 19px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

/* ================================ TILES =================================== */

.asc-tiles {
    background: var(--asc-faixa);
    padding-block: 48px;
}

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

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

.asc-tile__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 28px 16px;
    background: var(--branco);
    border-radius: 8px;
    border: 1px solid rgba(33, 65, 56, .12);
    text-align: center;
    text-decoration: none;
    color: var(--verde-escuro);
    transition: transform .15s ease, box-shadow .15s ease;
}
.asc-tile__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(33, 65, 56, .12);
}
.asc-tile__link:focus-visible {
    outline: 2px solid var(--verde-escuro);
    outline-offset: 3px;
}

.asc-tile__icone {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--asc-faixa);
    color: var(--verde-escuro);
    font-size: 26px;
    flex: none;
}

.asc-tile__nome {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
}

/* ==================== EXCLUSIVO PARA ASSOCIADOS ============================ */

.asc-exclusivo {
    background: var(--asc-exclusivo);
    padding-block: 56px;
}

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

.asc-exclusivo__titulo {
    margin: 0 0 32px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: var(--branco);
}

.asc-exclusivo__grade {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.asc-exclusivo__cartao {
    display: flex;
    flex-direction: column;
    padding: 24px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 8px;
}

.asc-exclusivo__nome {
    margin: 0 0 10px;
    font-size: 18px;
    font-weight: 700;
    color: var(--lima);
}

.asc-exclusivo__texto {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.45;
    color: rgba(255, 255, 255, .88);
    flex: 1;
}

.asc-exclusivo__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--branco);
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 2px solid var(--lima);
    padding-bottom: 2px;
}
.asc-exclusivo__link:hover { color: var(--lima); }

/* ================================ CONTATOS ================================= */

.asc-contato {
    background: var(--branco);
    padding-block: 56px 62px;
}

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

.asc-contato__titulo {
    margin: 0 0 28px;
    font-size: 30px;
    font-weight: 700;
    text-align: center;
    color: var(--verde-escuro);
}

.asc-contato__cartao {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    max-width: 640px;
    margin-inline: auto;
    padding: 28px;
    background: var(--asc-faixa);
    border-radius: 8px;
}

.asc-contato__foto {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
}

.asc-contato__dados p {
    margin: 0 0 6px;
    font-size: 15px;
    color: var(--verde-escuro);
}
.asc-contato__nome { font-size: 17px; font-weight: 700; }
.asc-contato__dados a { color: var(--verde-escuro); font-weight: 600; }

.asc-contato__dados .botao { margin-top: 14px; }

/* ========================= ARTIGO (páginas de detalhe) ===================== */

.asc-artigo {
    background: var(--branco);
    padding-block: 44px 60px;
}

.asc-artigo__interno {
    /**
     * 🔴 930, NAO 820 -- padronizado em 08/09/2026 a pedido do Jonh: o
     * `.nd__coluna` de Notícias (medido no PDF, `noticia-detalhe.css`) e a
     * referencia de largura de leitura do portal inteiro. Esta classe e
     * usada por MUITAS paginas de conteudo (Institucional, FAQ, Imprensa,
     * Servicos, Parceiros, Clipping, Legislacoes, Cartas, e quase toda
     * Associe-se) -- os 820px antigos nao vinham de PDF nenhum, foi uma
     * largura arbitraria escolhida pagina a pagina.
     */
    width: min(100% - 48px, 930px);
    margin-inline: auto;
}

/**
 * Vídeos institucionais é grade de cartões, não texto corrido -- precisa de mais largura.
 *
 * 🔴 SÓ NO `<div class="asc-artigo__interno">`, NUNCA NO `<section class="asc-artigo">`.
 * Achado em 08/09/2026 (Organograma, Agraciados e Quem é Quem nasceram com o
 * defeito, replicado de um pro outro): esta classe sozinha NÃO tem
 * `margin-inline: auto` -- só a `.asc-artigo__interno` base tem. Botar as duas
 * classes na SECTION (sem a base) trava a largura em 1170px mas sem
 * centralizar -- o bloco cola na borda esquerda e sobra uma faixa em branco
 * do lado direito, tanto maior quanto mais larga a tela (quase invisível a
 * 1440px, escancarado num monitor comum). A `<section>` já é full-bleed de
 * propósito (só padding-block); quem centraliza e limita a largura é sempre
 * o `<div>` de dentro.
 */
.asc-artigo__interno--largo {
    width: min(100% - 48px, var(--largura-conteudo));
}

.asc-artigo__vazio {
    margin: 24px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.asc-artigo__titulo {
    margin: 0 0 24px;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--verde-escuro);
}

.asc-artigo__interno p {
    margin: 0 0 16px;
    font-size: 17px;
    line-height: 1.55;
    color: var(--verde-escuro);
}

/**
 * 🔴 `.leg-detalhe__corpo` NUNCA TEVE REGRA NENHUMA (achado em 08/09/2026) --
 * a classe existe em `institucional/{artigo,politica-de-privacidade}.phtml`,
 * `parceiros/detalhe.phtml` e `colunas/detalhe.phtml` (esta, pré-existente),
 * mas nenhuma folha de CSS a define -- o texto sempre renderizou só com o
 * padrão do navegador (sem cor/espaçamento/tabela responsiva nossos).
 * MESMA receita de `.nd__corpo` (noticia-detalhe.css, já testada em 400
 * notícias reais) -- regra própria, não a classe reaproveitada, mesmo
 * critério de sempre.
 */
.leg-detalhe__corpo {
    margin: 0 0 8px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--verde-escuro);
}
.leg-detalhe__corpo > *:first-child { margin-top: 0; }
.leg-detalhe__corpo p { margin: 0 0 20px; }

.leg-detalhe__corpo h2,
.leg-detalhe__corpo h3,
.leg-detalhe__corpo h4 {
    margin: 32px 0 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--verde-escuro);
}
.leg-detalhe__corpo h2 { font-size: 26px; }
.leg-detalhe__corpo h3 { font-size: 22px; }
.leg-detalhe__corpo h4 { font-size: 18px; }

.leg-detalhe__corpo ul,
.leg-detalhe__corpo ol {
    margin: 0 0 20px;
    padding-left: 24px;
}
.leg-detalhe__corpo li { margin-bottom: 8px; }

.leg-detalhe__corpo a {
    color: var(--verde-escuro);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.leg-detalhe__corpo a:hover { color: var(--lima-escuro); }

/* imagem do conteúdo antigo não pode empurrar a rolagem da página */
.leg-detalhe__corpo img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-block: 8px;
}

/* tabela do conteúdo antigo -- rola dentro de si, nunca empurra a página */
.leg-detalhe__corpo table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-bottom: 20px;
}
.leg-detalhe__corpo table td,
.leg-detalhe__corpo table th {
    padding: 8px 12px;
    border: 1px solid rgba(33, 65, 56, .16);
}

/* usado por Parceiros/Institucional/Imprensa -- entretítulo dentro do artigo */
.asc-artigo__subtitulo {
    margin: 32px 0 12px;
    font-size: 24px;
    font-weight: 700;
    color: var(--verde-escuro);
}

/* ==================== HUB INSTITUCIONAL (/institucional) =================== */

/**
 * Mesma receita visual de `.pub-mercado`/`.pub-frentes`/`.pub-frente__link`
 * (publicacoes.css) -- faixa escura, cartão com borda lima, tudo centrado --
 * em classes próprias (ver o cabeçalho de `institucional/index.phtml`).
 */
.inst-hub {
    background: var(--verde-escuro);
    padding-block: 56px 64px;
}

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

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

.inst-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 20px 22px;
    border: 1px solid var(--lima);
    border-radius: 2px;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s ease;
}
.inst-item:hover, .inst-item:focus-visible { background: rgba(168, 230, 30, .1); }
.inst-item:focus-visible { outline: 2px solid var(--lima); outline-offset: 3px; }

.inst-item__titulo {
    font-size: 17px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--branco);
}
.inst-item__titulo .bi { margin-left: 6px; font-size: .75em; color: var(--lima); vertical-align: 1px; }

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

@media (max-width: 767.98px) {
    .inst-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .inst-item { min-height: 84px; padding: 16px; }
    .inst-item__titulo { font-size: 15px; }
}

@media (max-width: 479.98px) {
    .inst-grade { grid-template-columns: minmax(0, 1fr); }
}

/* =============== MISSÃO E VISÃO (/institucional/missao-e-visao) ============ */

.mv-grade {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-bottom: 8px;
}
@media (max-width: 767.98px) {
    .mv-grade { grid-template-columns: minmax(0, 1fr); }
}

.mv-valores {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.mv-valores li {
    padding: 10px 18px;
    border: 1.5px solid var(--verde-escuro);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: var(--verde-escuro);
}

/* ==================== ORGANOGRAMA (/institucional/organograma) ============= */

.org-quadro {
    margin: 0 0 40px;
    padding: 20px;
    background: var(--branco);
    border: 1px solid rgba(33, 65, 56, .14);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(33, 65, 56, .06);
}

/**
 * 🔴 NUNCA `width: 100%` AQUI -- pedido do Jonh em 08/09/2026: respeitar o
 * tamanho real da imagem, não esticar. A Funcional já teve largura nativa
 * (833px) MENOR que a coluna de leitura (930px) -- `width: 100%` ampliava
 * ~12% e borrava, mesmo problema já visto nas fotos de "Quem é Quem"
 * (ampliação do navegador, não compressão). `max-width: 100%` encolhe
 * imagem MAIOR que a coluna (caso comum, ex.: a Matricial a 1366px) e
 * `width: auto` nunca amplia a imagem além do tamanho em que foi enviada.
 */
.org-quadro__imagem {
    display: block;
    max-width: 100%;
    width: auto;
    height: auto;
    margin-inline: auto;
    border-radius: 6px;
}

.org-quadro__legenda {
    margin-top: 18px;
    text-align: center;
}

/* ============= AGRACIADOS (/institucional/agraciados -- Comenda) =========== */

.agr-grade {
    list-style: none;
    margin: 24px 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 767.98px) {
    .agr-grade { grid-template-columns: minmax(0, 1fr); }
}

.agr-cartao {
    display: flex;
    gap: 18px;
    padding: 22px;
    background: var(--branco);
    border: 1px solid rgba(33, 65, 56, .14);
    border-radius: 12px;
}

.agr-cartao__foto {
    flex: none;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--asc-faixa);
}
.agr-cartao__foto--vazia {
    display: grid;
    place-items: center;
    color: var(--verde-escuro);
    font-size: 28px;
}

.agr-cartao__nome {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.agr-cartao__selo {
    margin: 0 0 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--lima-escuro, #6a9c14);
}
.agr-cartao__selo span:not(:last-child)::after { content: '•'; margin-left: 10px; color: rgba(33, 65, 56, .3); }

.agr-cartao__bio {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

/* ============== QUEM É QUEM (/institucional/quem-e-quem) =============== */

/**
 * O combo em si é `.filtro-periodo`/`.pub-filtro` (internas.css/publicacoes.css),
 * e a faixa título+combo é `.recentes__cabeca` (internas.css) -- as MESMAS
 * classes de Colunas/Cartas aos Associados/Pesquisas, de propósito: o combo
 * fica alinhado à DIREITA, na mesma linha do título da categoria, e não
 * solto e sozinho à esquerda como na 1ª versão (pedido do Jonh, 08/09/2026,
 * depois de ver o combo fora do padrão do resto do site).
 */
/**
 * 🔴 COR DO COMBO -- pedido do Jonh em 08/09/2026, respondendo à pergunta
 * "#8FC68A (padrão do site) ou #214138 (institucional)": #214138 aqui. A
 * variante em si (`.filtro-institucional`) é COMPARTILHADA agora -- mora em
 * `publicacoes.css`, junto de `.pub-filtro`/`.pub-combo__botao`, porque
 * `/noticias` passou a usá-la também no mesmo dia. Ver o comentário completo
 * lá; aqui fica só o ajuste que É exclusivo desta página.
 *
 * ⚠️ `--sempre-ativo`: em Notícias existe "Todos os anos" vazio, então
 * `.pub-combo--ativo` significa de verdade "a pessoa escolheu um período" --
 * e ganhar o tom escuro faz sentido. Aqui NÃO existe opção vazia (sempre uma
 * categoria selecionada), então `combo.js` liga `.pub-combo--ativo` o tempo
 * todo -- sem este contra-ajuste, o botão nunca mostraria o #214138 de
 * repouso, só o tom escuro. Esse ajuste fica aqui, e não em
 * `publicacoes.css`, porque é uma particularidade DESTA página, não da
 * variante em si.
 */
.filtro-institucional--sempre-ativo .pub-combo--ativo .pub-combo__botao {
    border-color: var(--verde-escuro);
    color: var(--verde-escuro);
    background-image: var(--pub-chevron-institucional);
}

.qq-categoria__titulo {
    margin: 28px 0 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-escuro);
}
.qq-categoria__conta {
    margin: 0 0 20px;
    font-size: 15px;
    color: var(--cinza-azulado);
}

/**
 * 🔴 O NÚMERO DE COLUNAS AQUI JÁ PASSEOU POR 4 -> 6 -> 5 -> 4, em 08/09/2026,
 * e a decisão final é do Jonh -- ele mesmo ajustou para 4 de novo depois das
 * experiências com 6 e 5.
 *
 * O motivo de mexer nisso: a foto real do acervo tem só 200px de largura, e
 * um cartão de 4 colunas mede ~274px -- o NAVEGADOR amplia a foto (274/200 =
 * 1,37x) para preencher o cartão, e é essa ampliação (não a compressão do
 * `Miniatura`) que produzia o ruído/borrão que ele viu. 6 colunas (~178px)
 * quase eliminava a ampliação, mas deixava o cartão estreito demais e
 * quebrava feio o e-mail da linha extra; 5 (~216px) era o meio-termo. Ainda
 * assim, o Jonh preferiu manter 4 -- provavelmente pelo visual da grade (o
 * ganho de nitidez de 5/6 colunas não valia, pra ele, o cartão mais apertado.
 * `Miniatura` (preset `q1`) continua entregando a imagem em 200×300; quem
 * decide o tamanho NA TELA é só este CSS, e vale reabrir essa conta se o
 * "ruído" da foto incomodar de novo.
 */
.qq-grade {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}
@media (max-width: 1199.98px) {
    .qq-grade { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .qq-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 479.98px) {
    .qq-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.qq-cartao {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border: 1px solid rgba(33, 65, 56, .14);
    border-radius: 12px;
    overflow: hidden;
    text-align: center;
}

/**
 * `aspect-ratio: 2/3` -- as fotos reais de produção são 200×300 (medido nos
 * arquivos de `/arquivos/institucional/`); a caixa segue essa proporção
 * mesmo na foto vazia, para o cartão nunca "pular" de tamanho na mesma grade.
 */
.qq-cartao__foto {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    background: var(--asc-faixa);
}
.qq-cartao__foto--vazia {
    display: grid;
    place-items: center;
    color: var(--verde-escuro);
    font-size: 40px;
}

.qq-cartao__corpo { padding: 16px 14px 20px; }

.qq-cartao__nome {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.qq-cartao__funcao {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--lima-escuro, #6a9c14);
}

.qq-cartao__extra {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--cinza-azulado);
    /**
     * 🔴 E-mail não tem espaço nenhum pra quebrar -- sem isto,
     * "danielcavalcante@abmes.org.br" simplesmente vazava a largura do
     * cartão e o `overflow: hidden` do .qq-cartao cortava o fim da palavra
     * (sumia o "r" final, sem reticências, sem aviso nenhum). Achado na
     * própria captura de tela, não é suposição.
     */
    overflow-wrap: anywhere;
}
.qq-cartao__extra a { color: inherit; }

/* cartão de destaque dentro do artigo (Sobre a ABMES / Cadastre-se / Prêmio de Jornalismo em Imprensa) */
.imp-cartao {
    background: var(--asc-faixa);
    border-radius: 8px;
    padding: 28px;
    margin: 8px 0 32px;
}

.imp-cartao__titulo {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.imp-cartao__texto {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.asc-artigo__lista {
    margin: 0 0 20px;
    padding-left: 22px;
}
.asc-artigo__lista li {
    margin-bottom: 10px;
    font-size: 17px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.asc-artigo__nota { font-size: 15px; color: var(--cinza-azulado, #5b6b66); }

.asc-artigo__voltar {
    margin-top: 32px;
    padding-top: 20px;   
}
.asc-artigo__voltar a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--verde-escuro);
    text-decoration: none;
}
.asc-artigo__voltar a:hover { text-decoration: underline; }

/* -------------------------------------------- tabela (Valores e Condições) */

.asc-artigo__tabela-scroll {
    overflow-x: auto;
    margin: 0 0 12px;
}

.asc-tabela {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 16px;
}
.asc-tabela th,
.asc-tabela td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid rgba(33, 65, 56, .12);
}
.asc-tabela th {
    background: var(--asc-faixa);
    color: var(--verde-escuro);
    font-weight: 700;
}
.asc-tabela tbody tr:nth-child(even) { background: #F5F7F0; }
.asc-tabela td:last-child { font-weight: 700; color: var(--verde-escuro); white-space: nowrap; }

/* --------------------------------------- bloqueado (Estatuto, associados) */

/**
 * 🔴 MEDIDA EXATA, pixel a pixel -- pedido do Jonh em 04/09/2026 contra a
 * imagem de referência dele: caixa com 155px de altura, cadeado 40px, botão
 * 264px de largura. `justify-content: center` com `height` fixo (em vez de
 * padding) garante os 155px sempre, mesmo que o conteúdo mude 1px de altura.
 * O aviso em texto saiu daqui -- ver o comentário em parciais/bloqueado.phtml.
 */
.asc-bloqueado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 155px;
    margin-bottom: 12px;
    background: var(--verde-escuro);
    border-radius: 8px;
    text-align: center;
}
.asc-bloqueado__cadeado {
    font-size: 40px;
    line-height: 1;
    color: var(--lima);
}
.asc-bloqueado__botao {
    width: 264px;
    justify-content: center;
}
.asc-bloqueado__aviso {
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: var(--verde-escuro);
}

/* ------------------------------------------------------------------- FAQ --- */

.asc-faq__categoria {
    margin: 32px 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-escuro);
}
.asc-faq__categoria:first-of-type { margin-top: 24px; }

.asc-faq__item {
    border: 1px solid rgba(33, 65, 56, .14);
    border-radius: 8px;
    padding: 4px 16px;
    margin-bottom: 10px;
}

.asc-faq__pergunta {
    padding: 12px 0;
    font-weight: 700;
    color: var(--verde-escuro);
    cursor: pointer;
    list-style: none;
}
.asc-faq__pergunta::-webkit-details-marker { display: none; }
.asc-faq__pergunta::before {
    content: "+";
    display: inline-block;
    width: 1.2em;
    color: var(--lima);
    font-weight: 700;
}
details[open] > .asc-faq__pergunta::before { content: "–"; }

.asc-faq__subcategoria {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cinza-azulado, #5b6b66);
}

.asc-faq__resposta {
    margin: 0 0 16px 1.2em;
    font-size: 16px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

/* ------------------------------------- Principais Ações/Principais Projetos */

.asc-acoes {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    display: grid;
    gap: 20px;
}

.asc-acoes__item {
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(33, 65, 56, .12);
}
.asc-acoes__item:last-child { border-bottom: 0; }

.asc-acoes__nome {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
}
.asc-acoes__nome a {
    color: var(--verde-escuro);
    text-decoration: none;
}
.asc-acoes__nome a:hover { text-decoration: underline; }

.asc-acoes__texto {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

/**
 * Miniatura da marca -- GANHOU em 04/09/2026 (pedido do Jonh, "colocar um
 * tumblr/miniatura... com suas respectivas logos, se tiver"). Só os itens
 * com `logo` viram flex de 2 colunas; os sem logo continuam como antes
 * (bloco só de texto).
 */
.asc-acoes__item--com-logo {
    display: flex;
    align-items: center;
    gap: 20px;
}
.asc-acoes__logo {
    flex: none;
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--branco);
    border: 1px solid rgba(33, 65, 56, .12);
    padding: 6px;
}

/**
 * Ícone padrão -- para quando não existe logo/submarca própria em produção
 * (ver o comentário de AssocieSe::principaisAcoes() sobre "ABMES Eventos" e
 * "Coluna Momento Tech"). Mesmo slot 72x72 da logo, com um ícone Bootstrap
 * Icons centralizado em vez de imagem.
 */
.asc-acoes__logo--padrao {
    display: grid;
    place-items: center;
    background: var(--asc-faixa);
    border: none;
    font-size: 30px;
    color: var(--verde-escuro);
}

/* ------------------------------------------------------- Nossa história --- */

.asc-historia__premio {
    margin: 0 0 24px;
    padding: 20px 24px;
    border-left: 4px solid var(--lima);
    background: var(--asc-faixa);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

.asc-historia__galeria {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    gap: 36px;
}

.asc-historia__presidente {
    padding-top: 28px;
    border-top: 2px solid var(--asc-faixa);
}
.asc-historia__presidente:first-child { border-top: 0; padding-top: 0; }

.asc-historia__nome {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: var(--verde-escuro);
}
.asc-historia__periodo {
    font-weight: 500;
    color: var(--cinza-azulado, #5b6b66);
    font-size: 17px;
}

.asc-historia__subsecao {
    margin: 16px 0 0 20px;
    padding-left: 16px;
    border-left: 3px solid var(--asc-faixa);
}
.asc-historia__subtitulo {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--verde-escuro);
}

.asc-historia__citacao {
    margin: 16px 0 0;
    padding: 16px 20px;
    border-left: 4px solid var(--lima);
    background: var(--asc-faixa);
    font-style: italic;
    font-size: 16px;
    line-height: 1.5;
    color: var(--verde-escuro);
}

/* --------------------------------------------- Vídeos institucionais --- */

.vid-grade {
    margin-bottom: 0 !important;   /* .cartoes traz 56px de sobra que aqui não faz falta -- o botão de carregar já respira sozinho */
}

.vid-cartao {
    display: flex;
    flex-direction: column;
    background: var(--branco);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(33, 65, 56, .08);
}

.vid-cartao__capa {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--verde-escuro);
    border: 0;
    padding: 0;
    cursor: pointer;
}
.vid-cartao__capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vid-cartao__capa--sem-video { cursor: default; }

.vid-cartao__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(29, 51, 45, .25);
    color: var(--branco);
    font-size: 20px;
    transition: background-color .15s ease;
}
.vid-cartao__play .bi {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--verde-escuro);
    padding-left: 4px;    /* o triângulo do "play" óptico fica melhor levemente descentrado */
}
.vid-cartao__capa:hover .vid-cartao__play { background: rgba(29, 51, 45, .45); }
.vid-cartao__capa:focus-visible { outline: 2px solid var(--lima); outline-offset: -2px; }

.vid-cartao__player {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
}

.vid-cartao__texto {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.vid-cartao__titulo {
    margin: 0 0 8px;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
    color: var(--verde-escuro);
}

/*
 * O <a> do titulo (08/09/2026) nao herda a cor sozinho -- o navegador tem
 * uma regra propria para link (azul) mais especifica que a heranca de
 * `color`. Sem isto, o titulo mudava de cor so por ter virado link.
 */
.vid-cartao__titulo a {
    color: inherit;
    text-decoration: none;
}

.vid-cartao__titulo a:hover,
.vid-cartao__titulo a:focus-visible {
    text-decoration: underline;
}

.vid-cartao__resumo {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.45;
    color: var(--verde-escuro);
    flex: 1;

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

.vid-cartao__data {
    margin: 0;
    font-size: 13px;
    color: var(--cinza-azulado, #5b6b66);
}

/* ---- Galeria Multimídia (04-08/09/2026) -- abas, busca, cartão de áudio e grade de fotos ---- */

.mm-abas {
    max-width: 1170px;
    margin: 0 auto;
    padding: 24px 24px 0;
}
.mm-abas__lista {
    display: flex;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #e2e8e5;
}
.mm-abas__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    font-weight: 600;
    font-size: 15px;
    color: var(--cinza-azulado, #5b6b66);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.mm-abas__link:hover { color: var(--verde-escuro); }
.mm-abas__link--ativo {
    color: var(--verde-escuro);
    border-bottom-color: var(--lima);
}

.mm-busca {
    display: flex;
    align-items: stretch;
    border: 1px solid #d7ded9;
    border-radius: 6px;
    overflow: hidden;
    background: var(--branco);
}
.mm-busca__campo {
    border: 0;
    padding: 10px 14px;
    font-size: 14px;
    min-width: 220px;
    flex: 1;
}
.mm-busca__campo:focus { outline: none; }
.mm-busca__botao {
    border: 0;
    background: var(--verde-escuro);
    color: var(--branco);
    padding: 0 16px;
    cursor: pointer;
}
.mm-busca__botao:hover { background: #16261f; }

.vid-cartao__capa--icone {
    display: grid;
    place-items: center;
    font-size: 40px;
    color: var(--lima);
}

.mm-audio {
    width: 100%;
    margin-top: 4px;
}

.mm-album-capa {
    display: block;
    max-width: 100%;
    border-radius: 8px;
}

.mm-album-grade {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    margin: 24px 0 0;
    padding: 0;
}
.mm-album-grade__item a {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
}
.mm-album-grade__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .15s ease;
}
.mm-album-grade__item a:hover img { transform: scale(1.04); }

/**
 * 🔴 SÓ NA GALERIA MULTIMÍDIA -- pedido do Jonh em 08/09/2026: "Carregar mais
 * X" estava grudado na última fileira de cartões. `.carregar` (internas.css)
 * é `margin: 0` de propósito -- outras páginas dão o respiro pela borda do
 * próprio grid. Em vez de mexer em `.carregar`/`.vid-grade` (usadas também
 * em Vídeos Institucionais, Clipping etc.), esta classe some SÓ onde a
 * própria página a pede -- zero risco de mudar espaçamento em outra tela.
 */
.mm-carregar { margin-top: 32px; }

/* Página de DETALHE de vídeo/áudio (08/09/2026) -- texto completo + mídia grande. */

.mm-detalhe-texto {
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--verde-escuro);
}
.mm-detalhe-texto p { margin: 0 0 16px; }
.mm-detalhe-texto a { color: var(--verde-escuro); text-decoration: underline; }
.mm-detalhe-texto strong { font-weight: 700; }

.mm-detalhe-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    margin: 20px 0;
    border-radius: 8px;
    overflow: hidden;
    background: var(--verde-escuro);
}
.mm-detalhe-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */

@media (max-width: 991.98px) {
    .asc-hero__titulo { font-size: 44px; }
    .asc-tiles__grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .asc-artigo__titulo { font-size: 32px; }
    .mm-album-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    .asc-hero__titulo { font-size: 34px; }
    .asc-hero__texto { font-size: 17px; }
    .asc-vantagens { padding: 22px 20px 18px; }
    .asc-vantagens__lista { grid-template-columns: minmax(0, 1fr); }
    .asc-tiles__grade { grid-template-columns: minmax(0, 1fr); }
    .asc-exclusivo__grade { grid-template-columns: minmax(0, 1fr); }
    .asc-contato__cartao { flex-direction: column; align-items: center; text-align: center; }
    .asc-contato__dados a,
    .asc-contato__dados p { text-align: center; }
    .asc-artigo__titulo { font-size: 28px; }
    .mm-album-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mm-abas__lista { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .mm-abas__link { white-space: nowrap; }
    .mm-busca { width: 100%; }
    .mm-busca__campo { min-width: 0; }
}

@media (max-width: 991.98px), (pointer: coarse) {
    .asc-tile__link { padding-block: 24px; }
    .asc-exclusivo__link { padding-block: 6px; }
    .asc-artigo__voltar a { padding-block: 6px; }
    .mm-abas__link { padding-block: 14px; }
    .mm-busca__botao { padding-inline: 18px; }
}