/* ==========================================================================
   EVENTOS E CURSOS  --  /eventos-cursos
   --------------------------------------------------------------------------
   Todos os numeros vieram do LandingPage-EventosCursos.pdf (1440 x 3570,4),
   medidos nos proprios operadores do arquivo -- retangulos de fundo, caminhos
   dos botoes e matrizes de posicionamento do texto. Onde houver "medido" ao
   lado de um valor, ele saiu de la; onde nao houver, foi decisao de layout.

   O QUE ESTA PAGINA NAO TRAZ, DE PROPOSITO:
     - a faixa de busca e a chamada final estao em `publicacoes.css`
     - a faixa de Capacitacoes Gratuitas esta em `servicos.css`
   As tres sao as MESMAS parciais das outras paginas, e a view carrega as tres
   folhas. Copiar as regras para ca faria as duas versoes envelhecerem
   diferente, que foi exatamente o motivo de elas terem virado parcial.
   ========================================================================== */

:root {
    --ec-faixa:        #E5EAD2;   /* fundo da faixa de Eventos -- medido */
    --ec-escuro:       #1D332D;   /* titulos de secao e botoes -- medido */
    --ec-etiqueta:     #9AD252;   /* SEMINARIO / ASSINCRONO -- medido */
    --ec-cartao:       #214138;   /* fundo do cartao de evento -- medido */
    --ec-arte-vazia:   #ECECEE;   /* quando o evento nao tem arte */

    /**
     * 🔴 FAIXA DE "CURSOS RÁPIDOS" (Toolzz) -- pedido do Jonh em 03/09/2026:
     * mesmo tratamento de faixa colorida de "Cursos em andamento", mas na
     * paleta da PRÓPRIA Toolzz, não a da ABMES.
     *
     * A cor não foi escolhida a olho: veio do `:root` que a própria página
     * de curso da Toolzz carrega (`--primary-color: #99c05d`, visto no HTML
     * de `/play/curso/{id}` em 03/09/2026). #99C05D misturado a 20% em
     * branco (80% branco + 20% #99C05D) dá #EBF2DF -- mesma técnica de
     * diluição que já rendeu `--ec-faixa` a partir do verde institucional,
     * só que aqui a cor de partida é da Toolzz, não da ABMES.
     */
    --toolzz-faixa: #EBF2DF;
}

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

.ec-hero {
    background: var(--branco);
    /**
     * A faixa do PDF vai de y=152 (fim da trilha) a y=553,8 (inicio da busca).
     * Sao 401,8 no total; o texto ocupa ~322 e sobra 44 em cima e 36 embaixo.
     */
    padding-block: 44px 36px;
}

.ec-hero__interno {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    display: grid;
    /**
     * A arte tem 200 fixos e nao encolhe; o texto fica com o resto.
     * `minmax(0, 1fr)` -- e nao `1fr` -- porque item de grid tem largura
     * minima automatica, e um titulo longo empurraria a arte para fora.
     */
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: 40px;
}

.ec-hero__titulo {
    margin: 0;
    font-size: 72px;                 /* medido */
    line-height: 1;
    font-weight: 700;
    color: var(--verde-escuro);
    letter-spacing: -.01em;
}

.ec-hero__apoio {
    /* baseline do titulo em 249,2 e a do apoio em 290,6 */
    margin: 14px 0 0;
    font-size: 22px;                 /* medido */
    line-height: 1.2;
    font-weight: 400;
    color: var(--lima-escuro);
    text-transform: uppercase;
    letter-spacing: .01em;
    /**
     * No PDF esta linha cabe inteira, porque la o hero comeca em x=56 e tem
     * 1252 de largura. Aqui ele usa a grade de 1170 do resto do portal (a mesma
     * decisao ja tomada em Servicos), entao sobram ~940 para o texto e a frase
     * quebra em duas linhas.
     *
     * `balance` reparte as duas linhas em vez de deixar "SUPERIOR" sozinho na
     * segunda. Onde nao houver suporte, quebra como sempre quebrou.
     */
    text-wrap: balance;
}

.ec-hero__chamada {
    /* apoio em 290,6, primeira linha da chamada em 363,0 */
    margin: 30px 0 0;
    max-width: 60ch;
    font-size: 28px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 33,6 */
    font-weight: 700;
    color: var(--verde-escuro);
    text-wrap: pretty;
}

/**
 * 🔴 GANHOU DESTAQUE EM 02/09/2026, AUMENTADO DE NOVO EM 03/09/2026 -- pedido
 * do Jonh: os dois botões do hero ("Ver Cursos ABMES Academy"/"Calendário de
 * Seminários & Eventos") são a chamada principal da página. `padding` nos
 * quatro lados (em vez de `height` + `padding-inline`) porque foi assim que
 * o Jonh mediu na referência -- a altura agora nasce do próprio texto +
 * respiro, e não de um número fixo à parte. 50px iguais nos quatro lados
 * (e não 32/50 como na primeira tentativa) para o botão ficar "mais para um
 * formato de quadrado", como pedido desde o início.
 *
 * 🔴 A FILA SAIU de dentro de `.ec-hero__texto` -- pedido do Jonh: "para
 * centralizar com a section, tirei a div de dentro, trouxe para fora". Lá
 * dentro `justify-content: center` centralizava só contra a COLUNA de texto
 * (minmax(0,1fr), o que sobra depois dos 200px fixos da arte -- menos que a
 * largura toda). Como irmã de `.ec-hero__interno`, e com a MESMA largura,
 * ela centraliza contra a seção inteira, como no PDF de referência. Repete
 * abaixo de 992px (`.ec-hero__interno` vira coluna única): a fila já fica
 * depois da grade no HTML, então continua embaixo de texto + arte sem
 * nenhuma regra extra.
 */
.ec-hero__acoes {
    width: min(100% - 48px, var(--largura-conteudo));
    margin-inline: auto;
    /* ultima linha em 430,2 e o topo do botao em 466,5 */
    margin-top: 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;                       /* 398,3 - 374,3, medido */
}

.ec-hero__acoes .botao {
    padding: 50px;
    border-radius: 16px;
    font-size: 1.05rem;
}

.ec-hero__arte {
    width: 200px;                    /* medido: 200,3 x 200,0 */
    height: 200px;
    color: var(--ec-arte-vazia);     /* #ECECEE, a cor do PDF */
    justify-self: end;
}

/* ============================== BUSCA ===================================== */

/**
 * A UNICA diferenca real entre esta faixa e a de Publicacoes: aqui a pastilha
 * e mais alta (33 contra 27). Os dois PDFs divergem entre si neste ponto -- o
 * resto (fundo, campo, cores, recuos) bate numero por numero.
 */
.ec-filtros .pub-filtro,
.ec-filtros .pub-combo__botao {
    height: 33px;                    /* medido: y 660,0 .. 693,0 */
}

.ec-filtros__enviar {
    margin-top: 16px;
    display: flex;
    justify-content: center;
}

/* ============================== EVENTOS =================================== */

.ec-eventos {
    background: var(--ec-faixa);
    padding-block: 25px 22px;        /* 721,9 -> h2 e botao -> 1633,5 */
}

/**
 * Variante SO da pagina /eventos (listagem): o topo da faixa acompanha o
 * padding-block de 70px do Arquivo de Noticias (.recentes), pedido do
 * Jonathan em 02/09/2026. Fica em CLASSE A MAIS -- e nao editado direto em
 * .ec-eventos -- porque aquela classe e compartilhada com /eventos-cursos,
 * cujo padding-block de 25px vem medido do proprio PDF daquela pagina.
 */
.ec-eventos--lista {
    padding-block: 70px 22px;
}

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

.ec-eventos__titulo,
.ec-cursos__titulo {
    margin: 0;
    font-size: 40px;                 /* medido */
    line-height: 1.2;
    font-weight: 700;
    color: var(--ec-escuro);
    text-align: center;
}

/* ------------------------------------------------ os dois cartoes grandes */

.ec-destaques {
    list-style: none;
    margin: 15px 0 0;                /* h2 em 781, arte em 810,2 */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 27.6px;                     /* 733,8 - 706,2, medido */
}

.ec-destaque {
    min-width: 0;
}

.ec-destaque__link {
    display: block;
    border-radius: 4px;
    overflow: hidden;
    /**
     * Fundo escuro por baixo da arte: enquanto ela nao chega -- ou se o arquivo
     * tiver sumido do acervo, o que ja acontece com o evento #1115 -- o que
     * aparece e um retangulo da paleta, e nao o icone de imagem quebrada.
     */
    background: var(--ec-escuro);
    outline-offset: 3px;
}

.ec-destaque__arte {
    display: block;
    position: relative;              /* segura o ::after de falha -- ver abaixo */
    width: 100%;
    height: auto;
    /**
     * 3:2 e a moldura do layout (570,4 x 380,3).
     *
     * `object-fit: cover` aqui NAO recorta nada: a imagem ja chega composta
     * nessa proporcao pelo servidor (preset `d1`), com a arte inteira no meio e
     * a sobra preenchida com o fundo tirado da propria arte. O cover so existe
     * como rede de seguranca se um dia chegar um arquivo fora de medida.
     */
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ec-destaque__link:hover .ec-destaque__arte {
    opacity: .92;
}

/* --------------------------------------------------------------------------
   🔴 QUANDO A ARTE NAO EXISTE NO ACERVO
   --------------------------------------------------------------------------
   Nao e hipotese: em 18/08/2026 o evento #1115 ("Regional Nordeste") aponta
   para `15-07-REGIONAL-NORDESTE-evento-site.png`, e esse arquivo responde 404
   no acervo -- conferido tres vezes seguidas. E o proximo evento da agenda,
   entao ele cai justamente no primeiro cartao de destaque.

   Sem tratamento, o visitante ve o icone de imagem quebrada num cartao que E
   so imagem. Aqui o pseudo-elemento cobre a falha com o verde da secao e
   escreve o titulo do evento, que ja esta no `alt`.

   COMO ISTO FUNCIONA: enquanto a imagem carrega bem, o <img> e um elemento
   SUBSTITUIDO e o navegador NAO desenha ::after nenhum. Quando ela falha, o
   elemento deixa de ser substituido e o ::after passa a valer. Chrome, Firefox
   e Safari se comportam assim. Se algum navegador nao se comportar, o pior caso
   e voltar ao que ja aconteceria hoje -- nao ha regressao possivel.

   ⚠️ A causa raiz e do lado da ABMES (arquivo que sumiu do acervo). Isto e o
   amortecedor, e nao o conserto.
   -------------------------------------------------------------------------- */
.ec-destaque__arte::after {
    content: attr(alt);
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    background: var(--ec-escuro);
    color: var(--branco);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    text-align: center;
    overflow: hidden;
}

.ec-item__arte::after {
    /* no cartao de curso o titulo ja aparece embaixo -- aqui basta cobrir */
    content: '';
    position: absolute;
    inset: 0;
    background: var(--ec-arte-vazia);
    border-radius: inherit;
}

/* ------------------------------------------------- os tres cartoes menores */

.ec-cartoes {
    list-style: none;
    margin: 12.8px 0 0;              /* 1203,3 - 1190,5, medido */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18.2px;                     /* 532,8 - 514,6, medido */
}

.ec-cartao {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 335.7px;             /* medido */
    /**
     * O recuo de cima e 30,5, e nao 44.
     *
     * 44 era a distancia do topo do cartao ate a LINHA DE BASE da etiqueta
     * (1203,3 -> 1247,3). O topo da caixa de texto fica 13,5 acima dessa linha,
     * porque e o que a fonte sobe. Usando 44 o cartao saia 356 de altura contra
     * os 335,7 do layout -- medido no navegador antes de corrigir.
     */
    padding: 30.5px 33.3px 30.4px;
    background: var(--ec-cartao);
    border-radius: 4px;
    color: var(--branco);
}

.ec-cartao__etiqueta {
    margin: 0;
    font-size: 18px;                 /* medido */
    line-height: 1;
    font-weight: 700;
    color: var(--ec-etiqueta);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.ec-cartao__titulo {
    margin: 11px 0 0;                /* base da etiqueta 1247,3 -> topo do titulo 1262,8 */
    font-size: 22px;                 /* medido */
    line-height: 1.18;               /* linhas a cada 26,0 */
    font-weight: 700;
    color: var(--branco);
    /**
     * Quebra em qualquer lugar quando a palavra nao cabe.
     * Titulo de evento tem "regulamentacao" e "empregabilidade"; sem isto uma
     * palavra dessas atravessa a borda do cartao no celular.
     */
    overflow-wrap: anywhere;
}

.ec-cartao__link {
    color: inherit;
    text-decoration: none;
}
.ec-cartao__link:hover { text-decoration: underline; }

/**
 * 🔴 A area clicavel e o CARTAO INTEIRO, mas o <a> envolve so o titulo.
 *
 * Fosse o <a> por fora, o leitor de tela anunciaria etiqueta + titulo + data +
 * "Mais detalhes" como UM rotulo de link so -- ilegivel. Com o ::after
 * esticado, o link continua tendo um rotulo curto e o mouse ganha o cartao
 * todo. O `position: relative` do cartao e o que segura esse ::after.
 */
.ec-cartao__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.ec-cartao__data {
    /* o bloco da data encosta no rodape do cartao, junto com o botao */
    margin: auto 0 0;
    padding-top: 18px;             /* fim do titulo 1388,9 -> icone 1406,7 */
    display: flex;
    align-items: center;
    gap: 9px;                        /* icone termina em 205,7, texto em ~214 */
    font-size: 21px;                 /* medido */
    line-height: 1.2;
    font-weight: 500;
    color: var(--branco);
}

.ec-cartao__calendario {
    flex: none;
    width: 30px;                     /* medido */
    height: 30px;
    color: var(--verde-medio);       /* #A4D85B, medido */
}

.ec-cartao__acao {
    margin: 30px 0 0;                /* fim do icone 1436,7 -> botao 1466,7 */
}

/**
 * Nao e um <a>: quem leva ao evento e o link do titulo, e o cartao inteiro ja
 * responde ao clique. Um segundo link para o mesmo destino so faria o leitor
 * de tela anunciar o mesmo endereco duas vezes.
 */
.ec-cartao__botao {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 201.4px;                  /* medido */
    max-width: 100%;
    height: 41.9px;                  /* medido */
    padding-inline: 18px;            /* texto em 188,1, borda em 170,7 */
    border: 1.7px solid var(--branco);
    border-radius: 4px;
    font-size: 17px;                 /* medido */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    color: var(--branco);
    transition: background-color .15s ease, color .15s ease;
}

.ec-cartao:hover .ec-cartao__botao {
    background: var(--branco);
    color: var(--ec-cartao);
}

.ec-eventos__todos,
.ec-cursos__todos {
    margin: 20.7px 0 0;              /* 1559,7 - 1539,0, medido */
    display: flex;
    justify-content: center;
}

.ec-eventos__todos .botao--escuro,
.ec-cursos__todos .botao--escuro {
    /* o botao do layout e o verde mais escuro da secao, e nao o institucional */
    background: var(--ec-escuro);
    border-color: var(--ec-escuro);
}
.ec-eventos__todos .botao--escuro:hover,
.ec-cursos__todos .botao--escuro:hover {
    background: #16261f;
    border-color: #16261f;
}

/* =============================== CURSOS =================================== */

.ec-cursos {
    background: var(--branco);
    padding-block: 49px 0;           /* 1633,5 -> caixa do titulo em 1682,6 */
}

.ec-cursos__interno {
    /**
     * ⚠️ Esta secao NAO usa a grade de 1170.
     * Medido no PDF: as artes vao de x=99,8 a x=1339,5, ou seja 1239,7 de
     * largura -- mais larga que o resto da pagina. Nao e engano meu: as
     * Capacitacoes, logo abaixo, tem 1225,8, e a faixa de Eventos tem 1170. O
     * layout usa tres larguras mesmo.
     */
    width: min(100% - 48px, 1239.7px);
    margin-inline: auto;
}

.ec-cursos__todos {
    margin-top: 38px;
    /**
     * 24, e nao 55: somados aos 54 de recuo da faixa de Capacitacoes dao os
     * 78 que o PDF tem entre o botao (fim em 2465,8) e o titulo "Capacitacoes
     * Gratuitas" (caixa em ~2544). Com 55 o vao saia 109 -- medido.
     */
    padding-bottom: 24px;
}

/* --------------------------------------------------------- grade de itens */

.ec-grade {
    list-style: none;
    margin: 8px 0 0;                 /* fim do titulo 1730,6 -> arte 1739,0 */
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /**
     * ⚠️ O vao de LINHA nao e 124, embora 324,4 - 200,4 de 124.
     *
     * No PDF o passo entre uma arte e a de baixo e 324,4 -- e dentro desses
     * 324,4 cabem a arte (200,4) E o texto do cartao (etiqueta + titulo). O que
     * sobra entre o fim do texto e a proxima arte sao ~36 quando o titulo tem
     * duas linhas.
     *
     * Usar 124 como `gap` foi meu primeiro corte, e abriu um buraco enorme
     * entre as duas linhas -- porque o gap do grid comeca DEPOIS do texto, e
     * nao depois da arte.
     */
    gap: 36px 19.75px;
}

.ec-item {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ec-item__arte {
    display: block;
    position: relative;              /* segura o ::after de falha */
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 1;             /* 400 x 200,4, medido */
    object-fit: cover;               /* rede de seguranca -- ver .ec-destaque__arte */
    border-radius: 4px;
    background: var(--ec-escuro);
}

.ec-item__arte--vazia {
    aspect-ratio: 2 / 1;
    background: var(--ec-arte-vazia);
}

.ec-item__etiqueta {
    /**
     * 14,3 e nao 27,8: 27,8 era ate a LINHA DE BASE da etiqueta (1967,2), e a
     * caixa do texto comeca 13,5 acima dela. Mesmo tropeco do recuo do cartao
     * de evento -- medido no navegador e corrigido.
     */
    margin: 14.3px 0 0;              /* fim da arte 1939,4 -> topo da etiqueta 1953,7 */
    padding-inline: 12.6px;          /* texto em 112,5, arte em 99,8 */
    font-size: 18px;                 /* medido */
    line-height: 1;
    font-weight: 700;
    color: var(--ec-etiqueta);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.ec-item__titulo {
    margin: 8.5px 0 0;               /* fim da etiqueta 1971,7 -> topo do titulo 1980,2 */
    padding-inline: 12.6px;
    font-size: 20px;                 /* medido */
    line-height: 1.2;                /* linhas a cada 24,0 */
    font-weight: 700;
    color: var(--verde-escuro);
    overflow-wrap: anywhere;
}

.ec-item__link {
    color: inherit;
    text-decoration: none;
}
.ec-item__link:hover { text-decoration: underline; }

/* mesma tecnica do cartao de evento -- ver o comentario la */
.ec-item__link::after {
    content: '';
    position: absolute;
    inset: 0;
}

.ec-item__data {
    margin: 8px 0 0;
    padding-inline: 12.6px;
    font-size: 15px;
    line-height: 1.3;
    color: var(--cinza-azulado);
}

.ec-item__selo {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--faixa-clara);
    color: var(--verde-escuro);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.ec-item__selo--sempre {
    background: #DFFF9D;
}

/* ============================= RESULTADO ================================== */

.ec-resultado {
    background: var(--branco);
    padding-block: 44px 55px;
}

.ec-resultado__interno {
    width: min(100% - 48px, 1239.7px);
    margin-inline: auto;
}

.ec-resultado__titulo {
    margin: 0;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--verde-escuro);
}

.ec-resultado__titulo em {
    font-style: normal;
    color: var(--lima-escuro);
}

.ec-resultado__voltar {
    margin: 8px 0 0;
    font-size: 16px;
}

.ec-resultado__voltar a {
    color: var(--verde-escuro);
    text-decoration: underline;
}

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

.ec-vazio a {
    color: var(--verde-escuro);
    text-decoration: underline;
}

.ec-paginas {
    margin-top: 44px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.ec-paginas__passo {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding-inline: 20px;
    border: 2px solid var(--verde-escuro);
    border-radius: 8px;
    color: var(--verde-escuro);
    font-weight: 600;
    text-decoration: none;
}
.ec-paginas__passo:hover {
    background: var(--verde-escuro);
    color: var(--branco);
}

.ec-paginas__conta {
    font-size: 16px;
    color: var(--verde-escuro);
}

/* ==========================================================================
   RESPONSIVO
   --------------------------------------------------------------------------
   Os cortes sao os mesmos do resto do portal (1319,98 / 1199,98 / 991,98 /
   767,98 / 479,98), para uma pagina nao quebrar num ponto em que a outra
   continua inteira.
   ========================================================================== */

@media (max-width: 1319.98px) {
    .ec-hero__titulo { font-size: 60px; }
    .ec-hero__chamada { font-size: 25px; }
    .ec-cartao__titulo { font-size: 20px; }
}

@media (max-width: 1199.98px) {
    .ec-hero__titulo { font-size: 52px; }
    .ec-hero__apoio { font-size: 19px; }
    .ec-hero__chamada { font-size: 22px; }

    .ec-cartao { min-height: 0; padding: 32px 24px 26px; }
    .ec-cartao__titulo { font-size: 19px; }
    .ec-cartao__data { font-size: 18px; }

    .ec-grade { gap: 72px 19.75px; }
    .ec-item__titulo { font-size: 18px; }
}

@media (max-width: 991.98px) {
    .ec-hero { padding-block: 32px 28px; }

    /**
     * A arte sai do lado e vai para cima do texto, centralizada.
     * Abaixo de 992 o texto precisa da largura inteira: com a arte fixa em 200
     * ao lado, o titulo de 52px passa a quebrar em quatro linhas.
     */
    .ec-hero__interno {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
    .ec-hero__arte { justify-self: center; order: -1; }
    .ec-hero__titulo { font-size: 44px; }
    .ec-hero__chamada { font-size: 20px; max-width: none; }

    .ec-eventos__titulo,
    .ec-cursos__titulo { font-size: 32px; }

    /* dois por linha: tres cartoes de 22px de titulo nao cabem em 768 */
    .ec-cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ec-grade   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 20px; }

    .ec-resultado__titulo { font-size: 26px; }
}

@media (max-width: 767.98px) {
    .ec-hero__titulo { font-size: 36px; }
    .ec-hero__apoio { font-size: 17px; }
    .ec-hero__chamada { font-size: 18px; }
    .ec-hero__arte { width: 150px; height: 150px; }

    /**
     * Um por linha. O destaque tambem: dois cartoes 3:2 lado a lado num
     * telefone dariam 160 de largura cada, e a arte do evento -- que tem texto
     * desenhado dentro -- ficaria ilegivel.
     */
    .ec-destaques,
    .ec-cartoes,
    .ec-grade { grid-template-columns: minmax(0, 1fr); }

    .ec-destaques { gap: 20px; }
    .ec-cartoes   { gap: 16px; }
    .ec-grade     { gap: 40px; }

    .ec-eventos { padding-block: 36px 36px; }
    .ec-cursos  { padding-block: 40px 0; }
    .ec-cursos__todos { padding-bottom: 40px; }

    .ec-eventos__titulo,
    .ec-cursos__titulo { font-size: 28px; }

    .ec-cartao__titulo { font-size: 20px; }
    .ec-item__titulo { font-size: 19px; }

    .ec-paginas { gap: 12px; }

    .ava__caixa { padding: 32px 20px; }
}

@media (max-width: 479.98px) {
    .ec-hero__titulo { font-size: 30px; }
    .ec-hero__chamada { font-size: 17px; }
    .ec-hero__arte { width: 120px; height: 120px; }

    /* botao de largura inteira: com 320 de tela, dois lado a lado nao cabem */
    .ec-hero__acoes { gap: 12px; }
    .ec-hero__acoes .botao { width: 100%; justify-content: center; }

    .ec-cartao { padding: 26px 20px 22px; }
    .ec-cartao__botao { width: 100%; }

    .ec-eventos__todos .botao,
    .ec-cursos__todos .botao { width: 100%; justify-content: center; text-align: center; }
}

/* --------------------------------------------------------------------------
   🔴 A CONDICAO E "OU", e de proposito: `(max-width: 991.98px), (pointer:
   coarse)`. Tablet grande em pe tem 1024 de largura e mesmo assim e dedo.
   Prender o alvo de toque so a largura deixaria justamente esse caso de fora.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px), (pointer: coarse) {
    /**
     * O botao do cartao e decorativo (quem clica e o cartao inteiro), mas ele
     * ainda precisa PARECER tocavel -- e o cartao ja tem area de sobra.
     * O que importa aqui e o resto: link do titulo e paginacao.
     */
    .ec-item__link,
    .ec-cartao__link {
        display: inline-block;
        padding-block: 4px;
    }

    .ec-resultado__voltar a {
        display: inline-block;
        padding-block: 8px;          /* 16 + 26 de linha = 42 de alvo */
    }

    .ec-paginas__passo { height: 46px; }

    .ec-cartao__botao { height: 44px; }

    /**
     * 🔴 CORRIGIDO em 10/09/2026 -- a pastilha de 33px (regra logo acima,
     * ".ec-filtros .pub-filtro/.pub-combo__botao", medida do PDF) tem 2
     * classes de especificidade e NENHUMA media query -- ela ganhava da
     * correção de alvo de toque de `publicacoes.css` (1 classe só) em
     * QUALQUER tela, inclusive celular/touch, deixando os filtros de
     * "Buscar eventos e cursos" presos em 33px onde todo o resto do site já
     * sobe pra 40px. Repetida aqui, com a MESMA especificidade da regra de
     * 33px e depois dela no arquivo, pra vencer o empate.
     */
    .ec-filtros .pub-filtro,
    .ec-filtros .pub-combo__botao { height: 40px; }
}

/* --------------------------------------------------------------------------
   SELO "OUTROS EVENTOS", na grade de Eventos Realizados (.selo vem de
   internas.css). Cor propria, pedida pelo Jonathan em 02/09/2026 -- fica
   aqui, e nao junto de .selo--internacional/.selo--regional em internas.css,
   porque "Outros Eventos" e tipo de EVENTO, sem relacao com categoria de
   noticia (mesmo a cor batendo com --internacional por coincidencia).
   -------------------------------------------------------------------------- */
.selo--outros { background: #2f5d8a; }

/* --------------------------------------------------------------------------
   "CURSOS RÁPIDOS" (Toolzz) -- só em /cursos. Modificador de `.recentes`
   (internas.css, sem cor própria -- herda o branco da página) com o fundo
   da faixa Toolzz definida no :root acima, mesma ideia visual de
   `.ec-eventos--lista` em "Cursos em andamento", só que na paleta de lá.
   -------------------------------------------------------------------------- */
.recentes--toolzz { background: var(--toolzz-faixa); }

/* --------------------------------------------------------------------------
   "AMBIENTE VIRTUAL ABMES" -- so em /cursos. Bloco institucional (botao +
   link de sugestao), sem cartao nenhum -- por isso fica aqui, e nao junto
   de .ec-grade/.ec-item, que sao so para item de agenda.

   🔴 GANHOU CAIXA EM 02/09/2026 -- pedido do Jonh: sem ela, titulo/botao/link
   soltos em fundo branco sumiam entre as duas secoes de cartao. A cor de
   fundo e a MESMA --ec-faixa da faixa "Cursos em andamento", ecoando aquela
   secao em vez de inventar uma cor nova so para esta caixa.
   -------------------------------------------------------------------------- */
.ava__caixa {
    max-width: 640px;
    margin-inline: auto;
    padding: 40px 32px;
    background: var(--ec-faixa);
    border-radius: 12px;
    text-align: center;
}

.ava__titulo { margin-bottom: 0; }

.ava__acoes {
    margin: 20px 0 0;
}

.ava__sugestao {
    margin: 16px 0 0;
}

.ava__sugestao a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--lima-escuro);
    font-weight: 700;
    text-decoration: none;
}
.ava__sugestao a:hover { text-decoration: underline; }
.ava__sugestao .bi { font-size: 14px; }

/* --------------------------------------------------------------------------
   Quem pediu menos movimento nao ganha transicao nenhuma.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ec-destaque__arte,
    .ec-cartao__botao {
        transition: none;
    }
}