/* ==================================================================
   TEMA GEP
   Identidade visual do site sobre o template Space (HtmlStream).

   O template comercial traz a paleta genérica dele (--primary: #377dff).
   Este arquivo concentra as cores da marca e os componentes próprios,
   para que o azul institucional não continue espalhado em hexadecimal
   dentro de cada view.

   Carregado em views/_includes/head.php, vale para o site inteiro.

   Sumário
     1. Tokens
     2. Cabeçalho de página interna  (.gep-hero)
     3. Conteúdo vindo do CMS        (.gep-conteudo)
     4. Lista de pessoas             (.gep-pessoas)
     5. Membros                      (.gep-membros)
     6. Catálogo de cursos/eventos   (.gep-catalogo)
     7. Grupos de estudos            (.gep-estudos)
     8. Textos, o blog               (.gep-texto, .gep-artigo)
     9. Psicocine                    (.gep-cine)
    10. Lives                        (.gep-live)
    11. Instituto de Psicanálise     (.gep-instituto, .gep-edital)
    12. Página não encontrada        (.gep-erro)
    13. Menu no celular              (#navbarMainNav)
    14. Rodapé                       (.footer-gep)
    15. Movimento reduzido
================================================================== */


/* ------------------------------------------------------------------
   1. Tokens
   Cores tiradas do próprio material da marca:
     navy e ciano são os pixels exatos do logo (_assets/images/logo);
     azul é o mesmo hex que core.min_.css já usa no menu ativo/hover.
------------------------------------------------------------------ */

:root {
    --gep-navy: #013349;
    --gep-navy-escuro: #012231;
    --gep-navy-profundo: #01161f;
    --gep-ciano: #00c0ca;
    --gep-ciano-texto: #00a0ad;    /* ciano rebaixado, para texto sobre branco */
    --gep-azul: #35719c;

    --gep-texto: #012c3e;
    --gep-texto-suave: #4a5a6a;
    --gep-rotulo: #7a8ba0;
    --gep-borda: #e7e9f2;

    --gep-acento: linear-gradient(90deg, var(--gep-ciano) 0, var(--gep-azul) 100%);
    --gep-acento-vertical: linear-gradient(180deg, var(--gep-ciano) 0, var(--gep-azul) 100%);

    --gep-easing: cubic-bezier(.22, 1, .36, 1);
}


/* ------------------------------------------------------------------
   2. Cabeçalho de página interna
   Substitui o banner de foto escurecida do template.
   Markup em views/_includes/hero-pagina.php.
------------------------------------------------------------------ */

.gep-hero {
    position: relative;
    overflow: hidden;
    background: var(--gep-navy);
    background: linear-gradient(135deg, var(--gep-navy-escuro) 0%, #014963 55%, #012c3e 100%);
}

/*
   O template aplica `body:not(.layout-admin) section { padding: 100px 0 }`,
   cuja especificidade (0,1,2) vence a de `.gep-hero` (0,1,0). Para o padding
   do cabeçalho valer, a declaração precisa do mesmo alcance de seletor.
*/
body:not(.layout-admin) section.gep-hero {
    padding: 64px 0 58px;
}

.gep-hero .container {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* brilho ciano que respira atrás do título */
.gep-hero-glow {
    position: absolute;
    top: -30%;
    left: 8%;
    width: 620px;
    height: 620px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 192, 202, .28) 0%, rgba(0, 192, 202, 0) 68%);
    animation: gepHeroGlow 9s ease-in-out infinite;
}

@keyframes gepHeroGlow {
    0%, 100% { transform: scale(1);    opacity: .75; }
    50%      { transform: scale(1.18); opacity: 1; }
}

/* cluster de pontos: mesmo motivo do símbolo do logo */
.gep-hero-arte {
    position: absolute;
    top: 50%;
    right: 6%;
    width: 420px;
    max-width: 42vw;
    transform: translateY(-50%);
    opacity: .5;
}

.gep-hero-arte circle,
.gep-hero-arte line {
    animation: gepHeroFlutua 7s ease-in-out infinite;
}

.gep-hero-arte .g-2 { animation-delay: -1.4s; }
.gep-hero-arte .g-3 { animation-delay: -2.8s; }
.gep-hero-arte .g-4 { animation-delay: -4.2s; }

@keyframes gepHeroFlutua {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-14px); }
}

.gep-hero-eyebrow {
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gep-ciano);
    animation: gepEntra .8s var(--gep-easing) both;
}

.gep-hero-titulo {
    margin: 0 0 12px;
    font-size: 56px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -.02em;
    color: #fff;
    animation: gepEntra .9s var(--gep-easing) .12s both;
}

.gep-hero-sub {
    max-width: 520px;
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .72);
    animation: gepEntra .9s var(--gep-easing) .24s both;
}

/* risco que se desenha sob o texto */
.gep-hero-risco {
    width: 0;
    height: 3px;
    margin: 20px 0 0;
    border-radius: 3px;
    background: var(--gep-acento);
    animation: gepHeroRisco 1.1s var(--gep-easing) .4s both;
}

@keyframes gepEntra {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes gepHeroRisco {
    from { width: 0; }
    to   { width: 96px; }
}

/* retrato opcional, no lugar do cluster de pontos */
.gep-hero-foto-coluna {
    text-align: center;
}

.gep-hero-foto {
    width: 200px;
    height: 200px;
    border: 4px solid rgba(0, 192, 202, .35);
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
    animation: gepEntra 1s var(--gep-easing) .3s both;
}

@media (max-width: 991.98px) {
    body:not(.layout-admin) section.gep-hero {
        padding: 44px 0 40px;
    }

    .gep-hero-titulo {
        font-size: 36px;
    }

    .gep-hero-arte {
        display: none;
    }

    .gep-hero-foto-coluna {
        margin-top: 32px;
        text-align: left;
    }

    .gep-hero-foto {
        width: 132px;
        height: 132px;
    }
}


/* ------------------------------------------------------------------
   3. Conteúdo vindo do CMS
   O HTML das páginas institucionais é gravado no banco (paginas.Html),
   então a legibilidade tem que vir daqui — não dá para editar a marcação.
------------------------------------------------------------------ */

.gep-conteudo {
    max-width: 720px;   /* ~72 caracteres por linha */
}

.gep-conteudo p {
    margin-bottom: 1.6rem;
    font-size: 17px;
    line-height: 1.85;
    /*
       Sem justificar: o navegador não hifeniza em português e o texto
       justificado abre "rios" de espaço entre as palavras.
    */
    text-align: left;
    color: var(--gep-texto-suave);
}

.gep-conteudo a {
    color: var(--gep-azul);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gep-conteudo a:hover {
    color: var(--gep-ciano-texto);
}

.gep-conteudo h2,
.gep-conteudo h3 {
    margin: 2.5rem 0 1rem;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-conteudo img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

/*
   Saneamento do texto colado do Word.

   O editor do admin guarda a colagem com estilo INLINE, e estilo inline vence
   qualquer seletor — só dá para neutralizar com !important. É o único ponto do
   tema em que ele se justifica.

   Normaliza-se apenas o que descaracteriza a página: família (Times New Roman),
   corpo (24px) e cor (preto puro). NÃO se mexe em text-indent nem nas margens:
   o recuo de primeira linha e o espaçamento entre parágrafos são decisão de
   quem escreveu o texto, e cada página mantém o ritmo que o autor deu.
   Negrito e itálico seguem valendo, porque vêm como tag e não como estilo.
*/
.gep-conteudo p,
.gep-conteudo span,
.gep-conteudo div {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    background-color: transparent !important;
}

.gep-conteudo p {
    font-size: 17px !important;
    color: var(--gep-texto-suave) !important;
}


@media (max-width: 767.98px) {
    /* !important para vencer o saneamento da colagem, declarado acima */
    .gep-conteudo p {
        font-size: 16px !important;
    }
}


/* ------------------------------------------------------------------
   4. Lista de pessoas
   Cargo + nome (diretoria) ou só nome (conselho, comissões).
------------------------------------------------------------------ */

.gep-pessoas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-pessoas-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* mesmo recuo dos itens, para o título alinhar com os nomes */
.gep-pessoas-titulo {
    padding-left: 22px;
}

.gep-pessoa {
    position: relative;
    padding: 22px 0 22px 22px;
    border-bottom: 1px solid var(--gep-borda);
}

/* barra de acento que cresce no hover */
.gep-pessoa:before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 22px;
    left: 0;
    width: 3px;
    border-radius: 3px;
    background: var(--gep-acento-vertical);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s var(--gep-easing);
}

.gep-pessoa:hover:before {
    transform: scaleY(1);
}

.gep-pessoa-conteudo {
    transition: transform .35s var(--gep-easing);
}

.gep-pessoa:hover .gep-pessoa-conteudo {
    transform: translateX(8px);
}

/* o cargo identifica, mas quem importa na tela é a pessoa */
.gep-pessoa-cargo {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
    transition: color .35s ease;
}

.gep-pessoa:hover .gep-pessoa-cargo {
    color: var(--gep-ciano-texto);
}

.gep-pessoa-nome {
    display: block;
    font-size: 21px;
    font-weight: 300;
    line-height: 1.35;
    color: var(--gep-texto);
}

@media (max-width: 767.98px) {
    .gep-pessoas,
    .gep-pessoas-3 {
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
    }
}


/* ------------------------------------------------------------------
   5. Membros
   Filtros + grade de cards. Markup em views/quem_somos/membros-view.php
   e no componente views/quem_somos/componentes/membro-card.php.
------------------------------------------------------------------ */

/* ---------- filtros ---------- */

.gep-membros-filtros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 16px;
    align-items: end;
    padding: 20px 24px;
    border: 1px solid var(--gep-borda);
    border-radius: 8px;
    background-color: #fbfcfe;
}

.gep-membros-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

/*
   O .form-control do template tem font-size 17px e padding .78rem, o que dá
   uma altura natural de ~52px. Só fixar `height` fazia o conteúdo não caber,
   e input e select desalinhavam entre si. Aqui o tamanho é redeclarado por
   inteiro — fonte, entrelinha e padding — para os três campos baterem.
*/
.gep-membros-campo .form-control {
    height: 44px;
    padding: 10px 14px;
    border-color: #dfe3ec;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--gep-texto);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gep-membros-campo .form-control::placeholder {
    color: #a9b3c1;
}

/* foco na cor da marca, no lugar do azul genérico do template */
.gep-membros-campo .form-control:focus {
    border-color: var(--gep-azul);
    box-shadow: 0 0 0 3px rgba(53, 113, 156, .16);
    outline: 0;
}

/* campo de texto com ícone de busca embutido */
.gep-membros-input {
    position: relative;
}

.gep-membros-input i {
    position: absolute;
    top: 50%;
    left: 14px;
    font-size: 14px;
    color: #a9b3c1;
    transform: translateY(-50%);
    pointer-events: none;
}

.gep-membros-input .form-control {
    padding-left: 38px;
}

/* seta própria no select, no lugar da nativa do sistema */
.gep-membros-campo select.form-control {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2335719c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gep-membros-acoes {
    display: flex;
    align-items: center;
}

.gep-membros-acoes .btn {
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 42px;
    color: var(--gep-azul);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.gep-membros-acoes .btn:hover:not(:disabled) {
    background-color: rgba(53, 113, 156, .1);
    color: var(--gep-azul);
    text-decoration: none;
}

/* sem filtro ativo não há o que limpar */
.gep-membros-acoes .btn:disabled {
    color: #b9c1cc;
    cursor: default;
    opacity: 1;
}

.gep-membros-contador {
    margin: 20px 0 24px;
    font-size: 13px;
    color: var(--gep-rotulo);
}

/* ---------- grade ---------- */

/*
   auto-fill resolve a responsividade sem media query: as colunas se
   ajustam à largura disponível, com 320px de mínimo por card.
*/
.gep-membros {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/*
   Sem altura fixa. A versão anterior usava .h--500 do template, o que
   deixava espaço morto nos cards curtos e cortava os mais longos.
*/
.gep-membro {
    display: flex;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--gep-borda);
    border-top: 3px solid transparent;
    border-radius: 8px;
    background-color: #fff;
    transition: border-top-color .3s var(--gep-easing), box-shadow .3s var(--gep-easing), transform .3s var(--gep-easing);
}

/*
   O filtro esconde card com a propriedade `hidden`. Como `display: flex`
   acima vence o `[hidden] { display: none }` do navegador, a regra precisa
   ser declarada — sem isto o card oculto continua aparecendo.
*/
.gep-membro[hidden] {
    display: none;
}

.gep-membro:hover {
    border-top-color: var(--gep-ciano);
    box-shadow: 0 10px 28px rgba(1, 51, 73, .09);
    transform: translateY(-3px);
}

.gep-membro-nome {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--gep-texto);
}

.gep-membro-tipo {
    margin: 0 0 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gep-borda);
    font-size: 13px;
    color: var(--gep-azul);
}

.gep-membro-dados {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-membro-dados li {
    display: flex;
    gap: 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gep-texto-suave);
}

.gep-membro-dados li + li {
    margin-top: 14px;
}

.gep-membro-dados i {
    flex: 0 0 18px;
    margin-top: 2px;
    font-size: 15px;
    color: var(--gep-rotulo);
}

/* e-mails longos não podem estourar a largura do card */
.gep-membro-email {
    min-width: 0;
    word-break: break-word;
}

/* ---------- nenhum resultado ---------- */

.gep-membros-vazio {
    grid-column: 1 / -1;
    padding: 56px 24px;
    border: 1px dashed var(--gep-borda);
    border-radius: 8px;
    text-align: center;
}

.gep-membros-vazio i {
    font-size: 28px;
    color: var(--gep-rotulo);
}

.gep-membros-vazio-titulo {
    margin: 14px 0 6px;
    font-size: 18px;
    font-weight: 400;
    color: var(--gep-texto);
}

.gep-membros-vazio-texto {
    max-width: 380px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--gep-texto-suave);
}

@media (max-width: 767.98px) {
    .gep-membros-filtros {
        grid-template-columns: minmax(0, 1fr);
        padding: 18px;
    }

    .gep-membros-acoes .btn {
        flex: 1;
    }

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


/* ------------------------------------------------------------------
   6. Catálogo de cursos e eventos
   Filtros + grade de cards, compartilhados pelas duas telas. Markup em
   views/cursos-eventos/componentes/ (catalogo-filtros e produto-card).

   Os filtros reaproveitam a mesma forma dos de membros (seção 5), com
   nome próprio porque a grade tem quatro campos em vez de três.
------------------------------------------------------------------ */

/* ---------- a seção ---------- */

/*
   O template aplica `body:not(.layout-admin) section { padding: 100px 0 }`,
   cuja especificidade (0,1,2) vence a das utilitárias .pt-6/.pb-6 (0,1,0).
   Para o respiro do catálogo valer, a declaração precisa do mesmo alcance
   de seletor — mesmo caso do cabeçalho na seção 2.
*/
body:not(.layout-admin) section.gep-catalogo-secao {
    padding: 40px 0 72px;
}


/* ---------- filtros ---------- */

.gep-catalogo-filtros {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)) auto;
    gap: 16px;
    align-items: end;
    padding: 20px 24px;
    border: 1px solid var(--gep-borda);
    border-radius: 8px;
    background-color: #fbfcfe;
}

.gep-catalogo-campo label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

/*
   Mesma redeclaração completa de tamanho da seção 5: o .form-control do
   template tem font-size 17px e padding .78rem, e sem redeclarar fonte,
   entrelinha e padding juntos os inputs e selects desalinham entre si.
*/
.gep-catalogo-campo .form-control {
    height: 44px;
    padding: 10px 14px;
    border-color: #dfe3ec;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--gep-texto);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gep-catalogo-campo .form-control::placeholder {
    color: #a9b3c1;
}

.gep-catalogo-campo .form-control:focus {
    border-color: var(--gep-azul);
    box-shadow: 0 0 0 3px rgba(53, 113, 156, .16);
    outline: 0;
}

.gep-catalogo-input {
    position: relative;
}

.gep-catalogo-input i {
    position: absolute;
    top: 50%;
    left: 14px;
    font-size: 14px;
    color: #a9b3c1;
    transform: translateY(-50%);
    pointer-events: none;
}

.gep-catalogo-input .form-control {
    padding-left: 38px;
}

/* seta própria no select, no lugar da nativa do sistema */
.gep-catalogo-campo select.form-control {
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2335719c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gep-catalogo-acoes {
    display: flex;
    align-items: center;
}

.gep-catalogo-acoes .btn {
    height: 44px;
    margin: 0;
    padding: 0 16px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 42px;
    white-space: nowrap;
    color: var(--gep-azul);
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease;
}

.gep-catalogo-acoes .btn:hover:not(:disabled) {
    background-color: rgba(53, 113, 156, .1);
    color: var(--gep-azul);
    text-decoration: none;
}

/* sem filtro ativo não há o que limpar */
.gep-catalogo-acoes .btn:disabled {
    color: #b9c1cc;
    cursor: default;
    opacity: 1;
}

.gep-catalogo-contador {
    margin: 14px 0 16px;
    font-size: 13px;
    color: var(--gep-rotulo);
}

/*
   O cabeçalho e o rodapé do painel de filtros existem só no celular, onde a
   barra acima vira um painel (seção 8, subseção do .gep-drawer). No desktop
   a barra fica à vista e nenhum dos dois tem função.
*/
.gep-catalogo-painel-rodape {
    display: none;
}


/* ---------- grade ---------- */

/*
   auto-fill resolve a responsividade sem media query: as colunas se
   ajustam à largura disponível, com 232px de mínimo por card — cartão
   compacto, quatro ou cinco por linha num monitor comum.
*/
.gep-catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 20px;
}

.gep-produto {
    display: flex;
}

/*
   O filtro esconde card com a propriedade `hidden`. Como `display: flex`
   acima vence o `[hidden] { display: none }` do navegador, a regra precisa
   ser declarada — sem isto o card oculto continua aparecendo.
*/
.gep-produto[hidden] {
    display: none;
}

/* o card inteiro é o link: alvo de clique grande, um destino só */
.gep-produto-link {
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--gep-borda);
    border-radius: 10px;
    background-color: #fff;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .3s var(--gep-easing), transform .3s var(--gep-easing), border-color .3s var(--gep-easing);
}

.gep-produto-link:hover,
.gep-produto-link:focus {
    border-color: #d5dbe8;
    box-shadow: 0 14px 34px rgba(1, 51, 73, .12);
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
}


/* ---------- capa ---------- */

/*
   Caixa de proporção fixa com a arte por dentro. Os cartazes não têm
   proporção única no acervo (há 4:5, quadrado e paisagem), então recortar
   cortaria o texto do próprio cartaz — daí `contain` sobre um fundo neutro.
*/
.gep-produto-capa {
    position: relative;
    aspect-ratio: 5 / 6;
    padding: 10px;
    background-color: #f3f6fa;
}

/* navegador sem aspect-ratio (Safari < 15): altura fixa como reserva */
@supports not (aspect-ratio: 5 / 6) {
    .gep-produto-capa {
        height: 270px;
    }
}

.gep-produto-capa img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .4s var(--gep-easing);
}

.gep-produto-link:hover .gep-produto-capa img {
    transform: scale(1.03);
}


/* ---------- selo de situação ---------- */

.gep-produto-selo {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .04em;
    line-height: 1.4;
    color: #fff;
}

.gep-produto-selo--aberto {
    background-color: #0f9d58;
}

.gep-produto-selo--andamento {
    background-color: var(--gep-azul);
}

.gep-produto-selo--breve {
    background-color: var(--gep-ciano-texto);
}

/* encerrado não disputa atenção com o que ainda está de pé */
.gep-produto-selo--encerrado {
    background-color: rgba(1, 44, 62, .55);
}


/* ---------- selo de formato ---------- */

/*
   Online ou presencial é o que decide se a pessoa consegue participar —
   mais ainda num grupo que atende o noroeste paulista inteiro. Fica no pé
   da capa, em chip claro, para não ser confundido com o selo de situação
   (que é estado, muda sozinho com o tempo) nem disputar o canto com ele.
*/
.gep-produto-formato {
    position: absolute;
    right: 10px;
    bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: rgba(255, 255, 255, .94);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gep-texto);
    box-shadow: 0 2px 8px rgba(1, 51, 73, .12);
}

.gep-produto-formato i {
    font-size: 11px;
    color: var(--gep-ciano-texto);
}


/* ---------- corpo ---------- */

.gep-produto-corpo {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 16px 18px;
}

.gep-produto-meta {
    margin: 0 0 7px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gep-ciano-texto);
}

.gep-produto-nome {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--gep-texto);
}

.gep-produto-dados {
    margin: 0 0 14px;
    padding: 0;
    list-style: none;
}

.gep-produto-dados li {
    display: flex;
    gap: 8px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--gep-texto-suave);
}

.gep-produto-dados li + li {
    margin-top: 7px;
}

.gep-produto-dados i {
    flex: 0 0 14px;
    margin-top: 2px;
    font-size: 12px;
    color: var(--gep-rotulo);
}


/* ---------- rodapé do card ---------- */

/*
   `margin-top: auto` cola o rodapé na base: com títulos de uma a três
   linhas, valor e chamada ficam na mesma altura em toda a grade.
*/
.gep-produto-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--gep-borda);
}

.gep-produto-valor {
    font-size: 15px;
    font-weight: 500;
    color: var(--gep-texto);
}

.gep-produto-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--gep-azul);
}

.gep-produto-cta i {
    font-size: 10px;
    transition: transform .3s var(--gep-easing);
}

.gep-produto-link:hover .gep-produto-cta i {
    transform: translateX(4px);
}


/* ---------- nenhum resultado ---------- */

.gep-catalogo-vazio {
    grid-column: 1 / -1;
    padding: 56px 24px;
    border: 1px dashed var(--gep-borda);
    border-radius: 8px;
    text-align: center;
}

.gep-catalogo-vazio i {
    font-size: 28px;
    color: var(--gep-rotulo);
}

.gep-catalogo-vazio-titulo {
    margin: 14px 0 6px;
    font-size: 18px;
    font-weight: 400;
    color: var(--gep-texto);
}

.gep-catalogo-vazio-texto {
    max-width: 380px;
    margin: 0 auto;
    font-size: 14px;
    color: var(--gep-texto-suave);
}

@media (max-width: 991.98px) {

    body:not(.layout-admin) section.gep-catalogo-secao {
        /* espaço para o botão flutuante não cobrir o fim da grade */
        padding: 28px 0 96px;
    }

    /*
       Dentro do painel a barra vira uma coluna: os quatro campos ganham a
       largura toda e a moldura sai, porque o painel já é a moldura.
    */
    .gep-catalogo-filtros {
        grid-template-columns: minmax(0, 1fr);
        padding: 4px 0 0;
        border: 0;
        background-color: transparent;
    }

    .gep-catalogo-acoes {
        grid-column: 1 / -1;
    }

    .gep-catalogo-acoes .btn {
        flex: 1;
    }

    /*
       16px nos campos: abaixo disso o Safari do iPhone dá zoom na página ao
       focar, e a pessoa fica com a tela torta depois de digitar uma letra.
    */
    .gep-catalogo-campo .form-control {
        font-size: 16px;
    }

    /* o contador da página sai: quem conta agora é o botão do painel */
    .gep-catalogo-contador {
        margin: 0 0 18px;
    }

    /* ----- rodapé do painel ----- */

    .gep-catalogo-painel-rodape {
        display: block;
        position: sticky;
        bottom: 0;
        /*
           `margin-top: auto` encosta o bloco na base do painel (que é flex
           column) quando os filtros são curtos; o `sticky` assume quando a
           lista cresce e passa a rolar. Os dois juntos cobrem os dois casos.
        */
        margin: auto -20px 0;
        padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
        border-top: 1px solid var(--gep-borda);
        background-color: #fff;
    }

    /*
       Grudado na base do painel: a lista de campos rola, e o número de
       resultados é justamente o que precisa estar à vista enquanto se
       mexe nos filtros.
    */
    .gep-catalogo-aplicar {
        width: 100%;
        height: 48px;
        padding: 0 18px;
        border: 0;
        border-radius: 8px;
        background-color: var(--gep-navy);
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        cursor: pointer;
        transition: background-color .2s ease;
    }

    .gep-catalogo-aplicar:hover:not(:disabled) {
        background-color: var(--gep-azul);
    }

    .gep-catalogo-aplicar:disabled {
        background-color: #c3cbd8;
        cursor: default;
    }
}

@media (max-width: 575.98px) {
    .gep-catalogo {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* ------------------------------------------------------------------
   7. Grupos de estudos
   Blocos de cartaz + ficha. Markup em views/cursos-eventos/estudos-view.php
   e no componente views/cursos-eventos/componentes/estudo-bloco.php.
------------------------------------------------------------------ */

/*
   O template aplica `body:not(.layout-admin) section { padding: 100px 0 }`,
   cuja especificidade (0,1,2) vence a das utilitárias (0,1,0) — mesmo caso
   do cabeçalho na seção 2 e do catálogo na seção 6.
*/
body:not(.layout-admin) section.gep-estudos-secao {
    padding: 56px 0 72px;
}

.gep-estudos {
    display: flex;
    flex-direction: column;
    gap: 28px;
}


/* ---------- o bloco ---------- */

/*
   Cartaz à esquerda, conteúdo à direita. A coluna do cartaz é fixa em 240px
   porque os três ativos não têm a mesma forma — dois cartazes 4:5 e um logo
   quadrado de 176px —, e coluna elástica faria cada bloco começar num lugar.
*/
.gep-estudo {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 32px;
    padding: 28px;
    border: 1px solid var(--gep-borda);
    border-top: 3px solid transparent;
    border-radius: 10px;
    background-color: #fff;
    transition: border-top-color .3s var(--gep-easing), box-shadow .3s var(--gep-easing);
}

.gep-estudo:hover {
    border-top-color: var(--gep-ciano);
    box-shadow: 0 12px 32px rgba(1, 51, 73, .09);
}

.gep-estudo-capa {
    aspect-ratio: 4 / 5;
    padding: 8px;
    border-radius: 8px;
    background-color: #f3f6fa;
}

/* navegador sem aspect-ratio (Safari < 15): altura fixa como reserva */
@supports not (aspect-ratio: 4 / 5) {
    .gep-estudo-capa {
        height: 300px;
    }
}

.gep-estudo-capa img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/*
   Grupo sem cartaz: o conteúdo ocupa as duas colunas em vez de deixar um
   buraco de 240px à esquerda. O cartaz é opcional no painel, então este
   caso não é exceção — é um dos dois estados normais.
*/
.gep-estudo-conteudo--sem-capa {
    grid-column: 1 / -1;
}


/* ---------- texto ---------- */

.gep-estudo-titulo {
    margin: 0 0 14px;
    font-size: 26px;
    font-weight: 300;
    line-height: 1.25;
    color: var(--gep-texto);
}

.gep-estudo-chamada {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--gep-ciano-texto);
}

/*
   Sem justificar: o navegador não hifeniza em português e o texto
   justificado abre "rios" de espaço entre as palavras. A versão anterior
   usava .text-justify do template em todos os três blocos.
*/
.gep-estudo-texto {
    max-width: 68ch;
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.75;
    text-align: left;
    color: var(--gep-texto-suave);
}


/* ---------- ficha ---------- */

/*
   Frequência, horário, local e valor estavam soltos na prosa, separados por
   <br>. Em duas colunas de rótulo + valor, quem está decidindo se consegue
   participar encontra as respostas sem ler o bloco inteiro.
*/
.gep-estudo-ficha {
    margin: 20px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid var(--gep-borda);
}

.gep-estudo-ficha-item {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 16px;
    padding: 9px 0;
}

.gep-estudo-ficha-item + .gep-estudo-ficha-item {
    border-top: 1px solid #f2f4f9;
}

.gep-estudo-ficha dt {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--gep-rotulo);
}

.gep-estudo-ficha dt i {
    flex: 0 0 14px;
    font-size: 12px;
    color: var(--gep-ciano-texto);
}

.gep-estudo-ficha dd {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gep-texto);
}

.gep-estudo-ficha dd a {
    color: var(--gep-azul);
}

.gep-estudo-ficha dd a:hover {
    color: var(--gep-ciano-texto);
}


/* ---------- observação e ação ---------- */

/* aviso que vem depois da ficha, em faixa clara para não virar mais um parágrafo */
.gep-estudo-nota {
    margin: 20px 0 0;
    padding: 14px 16px;
    border-left: 3px solid var(--gep-ciano);
    border-radius: 0 6px 6px 0;
    background-color: #f4fbfc;
    font-size: 14px;
    line-height: 1.65;
    color: var(--gep-texto-suave);
}

.gep-estudo-acao {
    margin: 22px 0 0;
}

.gep-estudo-acao .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    padding: 11px 22px;
    border: 0;
    font-size: 14px;
    font-weight: 500;
    background-color: var(--gep-azul);
    color: #fff;
    transition: background-color .25s ease, box-shadow .25s ease;
}

.gep-estudo-acao .btn:hover,
.gep-estudo-acao .btn:focus {
    background-color: var(--gep-navy);
    box-shadow: 0 8px 20px rgba(1, 51, 73, .22);
    color: #fff;
}


/* ---------- responsivo ---------- */

@media (max-width: 767.98px) {
    body:not(.layout-admin) section.gep-estudos-secao {
        padding: 32px 0 48px;
    }

    /* o cartaz deixa de ser coluna e passa a abrir o bloco */
    .gep-estudo {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 20px;
    }

    .gep-estudo-capa {
        max-width: 220px;
    }

    .gep-estudo-titulo {
        font-size: 22px;
    }

    /* rótulo acima do valor: 170px de coluna não cabem num celular */
    .gep-estudo-ficha-item {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }
}


/* ------------------------------------------------------------------
   8. Textos (o blog)
   Capa paginada + página do texto.
   Markup em views/texto/ e views/texto/componentes/.

   Esta seção NÃO reaproveita a linguagem do catálogo (6), de propósito.
   Lá o objeto é um produto e o cartaz vende, então a forma é grade de
   cards iguais. Aqui o objeto é texto: quem decide a leitura é o título,
   o autor e a primeira linha. Daí a lista em linha, a coluna lateral e a
   serifada — a Lora entra no head só nas telas de /textos.
------------------------------------------------------------------ */

/* ---------- tokens próprios do blog ---------- */

:root {
    /*
       A serifada carrega os títulos de texto e o corpo do artigo. A pilha de
       reserva é serifada também: se a Lora não chegar, a página continua
       parecendo página de leitura, e não perde a cara para a Roboto.
    */
    --gep-serif: 'Lora', Georgia, 'Times New Roman', serif;
}


/* ---------- a seção ---------- */

/*
   Mesma redeclaração com `body:not(.layout-admin) section` das seções 2 e 6:
   o template aplica `padding: 100px 0` com especificidade (0,1,2), que vence
   qualquer utilitária de classe única.
*/
body:not(.layout-admin) section.gep-blog-secao {
    padding: 0 0 80px;
}


/* ---------- trilha de assuntos ---------- */

/*
   Faixa de links logo abaixo do cabeçalho, grudada no topo enquanto se rola:
   num blog o assunto é a navegação principal, e ter de voltar ao alto para
   trocar de assunto é o tipo de atrito que faz a pessoa sair.

   O `top` acompanha o cabeçalho fixo do template (72px).
*/
.gep-blog-assuntos {
    position: sticky;
    top: 72px;
    z-index: 20;
    margin: 0 0 40px;
    border-bottom: 1px solid var(--gep-borda);
    background-color: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

.gep-blog-assuntos ul {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    /*
       Rola na horizontal quando os 15 assuntos não cabem. `nowrap` no item e
       scrollbar escondida: a barra do Windows aparece em cima do texto e
       come 15px de altura da faixa.
    */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.gep-blog-assuntos ul::-webkit-scrollbar {
    display: none;
}

.gep-blog-assuntos li {
    flex: 0 0 auto;
}

.gep-blog-assunto {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 14px 14px 13px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    white-space: nowrap;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease;
}

.gep-blog-assunto:hover,
.gep-blog-assunto:focus {
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-blog-assunto--ativo {
    border-bottom-color: var(--gep-ciano);
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-blog-assunto-qtd {
    font-size: 11px;
    color: var(--gep-rotulo);
}

.gep-blog-assunto--ativo .gep-blog-assunto-qtd {
    color: var(--gep-ciano-texto);
}


/*
   Indica que a faixa continua além da borda. São 15 assuntos e nenhuma tela
   os mostra todos: sem a sombra, o último visível parece o fim da lista e
   ninguém descobre que dá para rolar.
*/
.gep-blog-assuntos {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent 100%);
}


/* ---------- capa ausente ---------- */

/*
   Dez textos do acervo não têm imagem utilizável (o painel gravou a palavra
   'NULL' em ImagemMini). O componente omite a <img> e põe aqui a inicial do
   título: o bloco mantém o tamanho, a lista continua alinhada, e o resultado
   lê como escolha de projeto — não como imagem que faltou carregar.
*/
.gep-blog-capa-vazia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #eef3f7 0%, #dfe8ee 100%);
}

.gep-blog-capa-vazia span {
    font-family: var(--gep-serif);
    font-size: 40px;
    font-weight: 600;
    line-height: 1;
    color: rgba(1, 51, 73, .22);
}

.gep-blog-destaque-capa.gep-blog-capa-vazia span {
    font-size: 96px;
}


/* ---------- as duas colunas ---------- */

.gep-blog {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
}

.gep-blog-principal {
    min-width: 0;
}


/* ---------- chamada de capa ---------- */

.gep-blog-destaque {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--gep-borda);
}

.gep-blog-destaque-link {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    text-decoration: none;
}

.gep-blog-destaque-link:hover {
    text-decoration: none;
}

.gep-blog-destaque-capa {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    background-color: #eef1f6;
}

.gep-blog-destaque-capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s var(--gep-easing);
}

.gep-blog-destaque-link:hover .gep-blog-destaque-capa img {
    transform: scale(1.03);
}

@supports not (aspect-ratio: 3 / 2) {
    .gep-blog-destaque-capa {
        height: 300px;
    }
}

.gep-blog-destaque-etiqueta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.gep-blog-etiqueta-novo {
    padding: 4px 10px;
    border-radius: 100px;
    background-color: rgba(0, 192, 202, .14);
    color: var(--gep-ciano-texto);
}

.gep-blog-destaque-assunto {
    color: var(--gep-rotulo);
}

.gep-blog-destaque-titulo {
    margin: 0 0 14px;
    font-family: var(--gep-serif);
    font-size: 34px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--gep-texto);
    transition: color .2s ease;
}

.gep-blog-destaque-link:hover .gep-blog-destaque-titulo {
    color: var(--gep-azul);
}

.gep-blog-destaque-chamada {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}

.gep-blog-destaque-assinatura {
    margin: 0 0 18px;
}

.gep-blog-destaque-autor {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-blog-destaque-meta {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--gep-rotulo);
}

.gep-blog-destaque-cta {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--gep-azul);
}

.gep-blog-destaque-cta i {
    font-size: 11px;
    transition: transform .2s var(--gep-easing);
}

.gep-blog-destaque-link:hover .gep-blog-destaque-cta i {
    transform: translateX(4px);
}


/* ---------- faixa de resultado ---------- */

.gep-blog-resultado {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: baseline;
    margin: 0 0 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gep-borda);
    font-size: 14px;
    color: var(--gep-texto-suave);
}

.gep-blog-resultado strong {
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-blog-resultado em {
    font-style: normal;
    color: var(--gep-texto);
}

.gep-blog-resultado-faixa {
    color: var(--gep-rotulo);
}

.gep-blog-resultado-limpar {
    margin-left: auto;
    font-size: 13px;
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-blog-resultado-limpar:hover {
    color: var(--gep-ciano-texto);
    text-decoration: underline;
}


/* ---------- lista de textos ---------- */

.gep-blog-lista {
    display: flex;
    flex-direction: column;
}

.gep-blog-item + .gep-blog-item {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--gep-borda);
}

/*
   Miniatura à esquerda com largura fixa: com coluna elástica dos dois lados,
   os textos começariam em pontos diferentes a cada item e a lista perderia
   a coluna de leitura que faz o olho descer pelos títulos.
*/
.gep-blog-item-link {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    text-decoration: none;
}

.gep-blog-item-link:hover {
    text-decoration: none;
}

.gep-blog-item-capa {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: 8px;
    background-color: #eef1f6;
}

.gep-blog-item-capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--gep-easing);
}

.gep-blog-item-link:hover .gep-blog-item-capa img {
    transform: scale(1.04);
}

@supports not (aspect-ratio: 3 / 2) {
    .gep-blog-item-capa {
        height: 147px;
    }
}

.gep-blog-item-etiqueta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    margin: 0 0 8px;
    font-size: 12px;
    color: var(--gep-rotulo);
}

.gep-blog-item-assunto {
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gep-ciano-texto);
}

.gep-blog-item-titulo {
    margin: 0 0 10px;
    font-family: var(--gep-serif);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--gep-texto);
    transition: color .2s ease;
}

.gep-blog-item-link:hover .gep-blog-item-titulo {
    color: var(--gep-azul);
}

.gep-blog-item-chamada {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--gep-texto-suave);
}

.gep-blog-item-autor {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--gep-texto);
}


/* ---------- nenhum resultado ---------- */

.gep-blog-vazio {
    padding: 56px 24px;
    border: 1px dashed var(--gep-borda);
    border-radius: 10px;
    text-align: center;
}

.gep-blog-vazio i {
    font-size: 28px;
    color: #c3cbd8;
}

.gep-blog-vazio-titulo {
    margin: 14px 0 4px;
    font-family: var(--gep-serif);
    font-size: 20px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-blog-vazio-texto {
    max-width: 400px;
    margin: 0 auto 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--gep-texto-suave);
}

.gep-blog-vazio-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: 6px;
    background-color: var(--gep-navy);
    font-size: 14px;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease;
}

.gep-blog-vazio-btn:hover {
    background-color: var(--gep-azul);
    color: #fff;
    text-decoration: none;
}


/* ---------- paginação ---------- */

.gep-blog-paginacao {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--gep-borda);
}

.gep-blog-pag {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--gep-borda);
    border-radius: 6px;
    background-color: #fff;
    font-size: 14px;
    color: var(--gep-texto);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

a.gep-blog-pag:hover,
a.gep-blog-pag:focus {
    border-color: var(--gep-azul);
    background-color: rgba(53, 113, 156, .08);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-blog-pag--atual {
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    font-weight: 600;
    color: #fff;
}

.gep-blog-pag--seta i {
    font-size: 11px;
}

.gep-blog-pag-corte {
    padding: 0 2px;
    color: var(--gep-rotulo);
}


/* ---------- coluna lateral ---------- */

/*
   Acompanha a rolagem: a lista é longa e, sem isto, buscar outra coisa no fim
   da página exige subir tudo de novo. O `top` soma o cabeçalho do template
   (72px) à faixa de assuntos (50px).

   É um <div role="complementary">, não um <aside>: o template aplica
   `aside { position: fixed !important }` abaixo de 991px (é a gaveta do
   layout de admin dele) e jogava esta coluna por cima do cabeçalho.
*/
.gep-blog-lateral {
    position: sticky;
    top: 130px;
}

/* o botão e o cabeçalho do painel só existem no celular (ver o responsivo) */
.gep-drawer-abrir,
.gep-drawer-topo,
.gep-drawer-fundo {
    display: none;
}

.gep-blog-bloco + .gep-blog-bloco {
    margin-top: 36px;
    padding-top: 30px;
    border-top: 1px solid var(--gep-borda);
}

.gep-blog-bloco-titulo {
    margin: 0 0 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}


/* busca */

.gep-blog-busca-campo {
    position: relative;
}

.gep-blog-busca-campo .form-control {
    height: 44px;
    padding: 10px 44px 10px 14px;
    border-color: #dfe3ec;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--gep-texto);
    box-shadow: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gep-blog-busca-campo .form-control::placeholder {
    color: #a9b3c1;
}

.gep-blog-busca-campo .form-control:focus {
    border-color: var(--gep-azul);
    box-shadow: 0 0 0 3px rgba(53, 113, 156, .16);
    outline: 0;
}

.gep-blog-busca-campo button {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0 6px 6px 0;
    background: transparent;
    font-size: 14px;
    color: var(--gep-rotulo);
    cursor: pointer;
    transition: color .2s ease;
}

.gep-blog-busca-campo button:hover {
    color: var(--gep-azul);
}


/* mais lidos */

.gep-blog-lidos {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.gep-blog-lidos a {
    display: flex;
    gap: 12px;
    align-items: baseline;
    padding: 11px 0;
    text-decoration: none;
}

.gep-blog-lidos li + li a {
    border-top: 1px solid var(--gep-borda);
}

.gep-blog-lidos-numero {
    flex: 0 0 auto;
    font-family: var(--gep-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--gep-ciano-texto);
}

.gep-blog-lidos-nome {
    display: block;
    font-size: 14px;
    line-height: 1.45;
    color: var(--gep-texto);
    transition: color .2s ease;
}

.gep-blog-lidos a:hover .gep-blog-lidos-nome {
    color: var(--gep-azul);
}

.gep-blog-lidos-autor {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: var(--gep-rotulo);
}


/* autores */

.gep-blog-autor {
    display: flex;
    gap: 8px;
}

.gep-blog-autor .form-control {
    height: 44px;
    min-width: 0;
    padding: 10px 34px 10px 12px;
    border-color: #dfe3ec;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--gep-texto);
    box-shadow: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2335719c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.gep-blog-autor .form-control:focus {
    border-color: var(--gep-azul);
    box-shadow: 0 0 0 3px rgba(53, 113, 156, .16);
    outline: 0;
}

.gep-blog-autor-ir {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--gep-borda);
    border-radius: 6px;
    background-color: #fff;
    font-size: 13px;
    color: var(--gep-texto-suave);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.gep-blog-autor-ir:hover {
    border-color: var(--gep-azul);
    color: var(--gep-azul);
}


/* arquivo por ano */

.gep-blog-anos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-blog-ano {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 7px 13px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: #fff;
    font-size: 13px;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gep-blog-ano:hover {
    border-color: var(--gep-azul);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-blog-ano--ativo {
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    color: #fff;
}

.gep-blog-ano--ativo:hover {
    background-color: var(--gep-azul);
    border-color: var(--gep-azul);
    color: #fff;
}

.gep-blog-ano-qtd {
    font-size: 11px;
    opacity: .7;
}


/* ==================================================================
   A página do texto
================================================================== */

/*
   Barra de progresso da leitura, no topo da janela e acima do cabeçalho fixo
   do template (z-index 1030 no Bootstrap 4) — uma linha de 3px atrás do menu
   não informa nada.
*/
.gep-artigo-progresso {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1040;
    width: 100%;
    height: 3px;
    background-color: transparent;
    pointer-events: none;
}

.gep-artigo-progresso span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--gep-acento);
}

body:not(.layout-admin) section.gep-artigo-secao {
    padding: 40px 0 64px;
}

.gep-artigo {
    max-width: 740px;
    margin: 0 auto;
}

.gep-artigo-trilha {
    margin-bottom: 20px;
    font-size: 13px;
    color: var(--gep-rotulo);
}

.gep-artigo-trilha a {
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-artigo-trilha a:hover {
    text-decoration: underline;
}

.gep-artigo-trilha span {
    margin: 0 6px;
}

.gep-artigo-assinatura {
    padding-bottom: 20px;
    border-bottom: 1px solid var(--gep-borda);
}

.gep-artigo-autor {
    margin: 0 0 2px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-artigo-meta {
    margin: 0;
    font-size: 13px;
    color: var(--gep-rotulo);
}

.gep-artigo-capa {
    margin: 28px 0 32px;
}

.gep-artigo-capa img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/*
   O corpo herda .gep-conteudo (seção 3) e troca só a família e o corpo da
   letra: texto longo em serifada, 18px e entrelinha alta é o que separa uma
   página de leitura de uma página institucional.

   O !important acompanha o da seção 3 — lá ele existe para neutralizar o
   estilo inline que o editor grava junto com o texto colado do Word, e sem
   repeti-lo aqui o tamanho voltaria a ser o de lá.
*/
.gep-artigo-corpo {
    max-width: none;
    font-family: var(--gep-serif);
}

.gep-artigo-corpo p {
    font-size: 18px !important;
    line-height: 1.85;
}

.gep-artigo-corpo h2,
.gep-artigo-corpo h3 {
    font-family: var(--gep-serif);
    font-weight: 600;
}

/* citação em bloco: o recurso mais usado nos textos do acervo */
.gep-artigo-corpo blockquote {
    margin: 2rem 0;
    padding: 4px 0 4px 22px;
    border-left: 3px solid var(--gep-ciano);
    font-size: 19px;
    font-style: italic;
    line-height: 1.7;
    color: var(--gep-texto);
}

/* ---------- saneamento do HTML colado do Word ---------- */

/*
   O acervo foi migrado colando do Word e de um site antigo, e o editor
   guardou a colagem inteira. Uma auditoria dos 73 textos publicados mostra
   o tamanho do problema:

     - `width: 740px` INLINE em quase todos os parágrafos — a origem da
       rolagem horizontal no celular: o parágrafo não cabe na tela e empurra
       a PÁGINA junto, que é a falha mais irritante que existe num telefone,
       porque o texto todo passa a escorregar de lado;
     - `text-align: justify` em 53 textos;
     - tags de Office em 23 (`<xml>`, `<o:p>`, `<w:*>`, `<m:*>`).

   Nada disso dá para arrumar na origem sem reeditar 73 textos à mão, então
   é aqui que se conserta. O !important é inevitável: estilo inline só perde
   para ele — mesmo caso, e mesma justificativa, da seção 3.
*/

/*
   Neutraliza a largura fixa. `max-width` em vez de `width: auto` porque
   preserva imagem e tabela que sejam legitimamente menores que a coluna.
*/
.gep-artigo-corpo * {
    max-width: 100% !important;
}

/*
   Palavra sem espaço maior que a coluna (URL colada, nome composto por
   hífen fino) também estoura, e nenhuma regra de largura resolve isso —
   só permitir a quebra dentro da palavra.
*/
.gep-artigo-corpo {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/*
   Desfaz o justificado, pela mesma razão já anotada na seção 3: o navegador
   não hifeniza em português, e justificar abre "rios" de espaço entre as
   palavras. Numa coluna de celular o efeito é grotesco.

   Só em <p>: em <div> e <span> um alinhamento pode ser escolha de quem
   escreveu (legenda centralizada, assinatura à direita), e não resíduo.
*/
.gep-artigo-corpo p {
    text-align: left !important;
}

/*
   Tags de Office não existem no HTML: o navegador as trata como elementos
   inline desconhecidos e imprime o que houver dentro delas.
*/
.gep-artigo-corpo xml,
.gep-artigo-corpo o\:p,
.gep-artigo-corpo w\:worddocument,
.gep-artigo-corpo w\:latentstyles {
    display: none !important;
}

/* a rolagem de tabela e <pre> fica presa ao elemento, não na página */
.gep-artigo-corpo table,
.gep-artigo-corpo pre {
    display: block;
    overflow-x: auto;
}


/* ---------- ficha do autor ---------- */

.gep-artigo-ficha {
    margin: 48px 0 0;
    padding: 24px 26px;
    border-radius: 8px;
    background-color: #f6f8fb;
    background-image: var(--gep-acento-vertical);
    background-repeat: no-repeat;
    background-size: 3px 100%;
}

.gep-artigo-ficha-rotulo {
    margin: 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

.gep-artigo-ficha-nome {
    margin: 0 0 6px;
    font-family: var(--gep-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-artigo-ficha-texto {
    margin: 0 0 4px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}

.gep-artigo-ficha-grupo {
    margin: 0;
    font-size: 13px;
    color: var(--gep-rotulo);
}

.gep-artigo-ficha-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 500;
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-artigo-ficha-link:hover {
    color: var(--gep-ciano-texto);
    text-decoration: none;
}

.gep-artigo-ficha-link i {
    font-size: 10px;
}


/* ---------- tags e compartilhar ---------- */

.gep-artigo-rodape {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid var(--gep-borda);
}

.gep-artigo-tags {
    display: flex;
    flex: 1 1 320px;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.gep-artigo-tags-rotulo,
.gep-artigo-compartilhar-rotulo {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

.gep-artigo-tags a {
    padding: 7px 14px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: #fff;
    font-size: 13px;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.gep-artigo-tags a:hover {
    border-color: var(--gep-azul);
    background-color: rgba(53, 113, 156, .08);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-artigo-compartilhar {
    display: flex;
    gap: 8px;
    align-items: center;
}

.gep-artigo-rede {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--gep-borda);
    border-radius: 50%;
    background-color: #fff;
    font-size: 15px;
    color: var(--gep-texto-suave);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .2s var(--gep-easing);
}

.gep-artigo-rede:hover,
.gep-artigo-rede:focus {
    transform: translateY(-2px);
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    color: #fff;
    text-decoration: none;
}

/* confirmação do "copiar link", desfeita pelo JS depois de um instante */
.gep-artigo-copiar--feito,
.gep-artigo-copiar--feito:hover {
    border-color: var(--gep-ciano-texto);
    background-color: var(--gep-ciano-texto);
    color: #fff;
}


/* ---------- leia também ---------- */

body:not(.layout-admin) section.gep-blog-relacionados {
    padding: 56px 0 72px;
    border-top: 1px solid var(--gep-borda);
    background-color: #fbfcfe;
}

.gep-blog-relacionados-titulo {
    max-width: 740px;
    margin: 0 auto 28px;
    font-family: var(--gep-serif);
    font-size: 24px;
    font-weight: 600;
    color: var(--gep-texto);
}

/*
   Aqui SIM uma grade de três: são três itens de fecho de leitura, não uma
   lista para percorrer. A lista em linha da capa precisaria da coluna
   inteira e competiria com o texto que a pessoa acabou de ler.
*/
.gep-blog-relacionados-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
}

.gep-blog-relacionado {
    text-decoration: none;
}

.gep-blog-relacionado:hover {
    text-decoration: none;
}

.gep-blog-relacionado-capa {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin-bottom: 14px;
    border-radius: 8px;
    background-color: #eef1f6;
}

.gep-blog-relacionado-capa img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s var(--gep-easing);
}

.gep-blog-relacionado:hover .gep-blog-relacionado-capa img {
    transform: scale(1.04);
}

@supports not (aspect-ratio: 3 / 2) {
    .gep-blog-relacionado-capa {
        height: 170px;
    }
}

.gep-blog-relacionado-assunto {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gep-ciano-texto);
}

.gep-blog-relacionado-titulo {
    margin: 0 0 6px;
    font-family: var(--gep-serif);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--gep-texto);
    transition: color .2s ease;
}

.gep-blog-relacionado:hover .gep-blog-relacionado-titulo {
    color: var(--gep-azul);
}

.gep-blog-relacionado-meta {
    margin: 0;
    font-size: 12px;
    color: var(--gep-rotulo);
}

.gep-blog-relacionados-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    max-width: 1100px;
    margin: 32px auto 0;
    font-size: 14px;
    font-weight: 500;
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-blog-relacionados-link:hover {
    color: var(--gep-ciano-texto);
    text-decoration: none;
}

.gep-blog-relacionados-link i {
    font-size: 11px;
}


/* ---------- responsivo ---------- */

@media (max-width: 1199.98px) {

    .gep-blog {
        gap: 40px;
    }

    .gep-blog-destaque-titulo {
        font-size: 30px;
    }
}

@media (max-width: 991.98px) {

    .gep-blog {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    /* a capa vira empilhada: 30px de título ao lado de uma foto não cabem */
    .gep-blog-destaque-link {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }


    /* ----- a lateral vira painel ----- */

    /*
       Empilhar a coluna no fim da página — o caminho óbvio — enterrava a
       busca e o arquivo embaixo de doze textos, e ninguém rola até lá para
       procurar. Aqui ela sai do fluxo e entra pela direita, chamada por um
       botão.

       Sem JavaScript nada disto acontece: o botão nasce com `hidden` e só o
       JS o revela, o painel nunca recebe a classe de aberto e a coluna
       continua onde está, ao fim da página, como conteúdo comum.
    */
    /*
       Botão flutuante, e não um botão no alto da lista: a lista é longa, e um
       controle no topo desaparece depois do segundo texto — justamente quando
       a pessoa percebe que precisa procurar em vez de continuar rolando.
       Flutuando, ele acompanha a leitura e está sempre a um toque.

       Canto inferior direito, onde o polegar alcança sem mudar a pegada do
       aparelho. O "voltar ao topo" do template nasce nesse mesmo canto e é
       empurrado para cima do botão de filtros (regra logo abaixo), de modo
       que os dois fiquem empilhados: um em cada ponta da tela emoldurava a
       página e ocupava as duas áreas de toque.
    */
    .gep-drawer-abrir {
        display: inline-flex;
        position: fixed;
        right: 16px;
        /* soma a faixa inferior do iPhone: sem isto o botão encosta na barra
           de gestos e o toque vai para o sistema, não para a página */
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        z-index: 1035;
        gap: 9px;
        align-items: center;
        justify-content: center;
        height: 52px;
        padding: 0 22px;
        border: 0;
        border-radius: 100px;
        background-color: var(--gep-navy);
        font-size: 15px;
        font-weight: 500;
        color: #fff;
        box-shadow: 0 8px 24px rgba(1, 51, 73, .32);
        cursor: pointer;
        transition: transform .2s var(--gep-easing), background-color .2s ease;
    }

    .gep-drawer-abrir[hidden] {
        display: none;
    }

    .gep-drawer-abrir:active {
        transform: scale(.96);
    }

    .gep-drawer-abrir i {
        font-size: 15px;
    }

    /*
       Marca que há filtro ativo. Sem ela, quem chega por um link de categoria
       vê uma lista curta e não tem como saber que está dentro de um recorte —
       o botão flutuante é o único lugar onde esse estado aparece no celular.
    */
    .gep-drawer-abrir--ativo::after {
        content: "";
        position: absolute;
        top: 12px;
        right: 16px;
        width: 9px;
        height: 9px;
        border: 2px solid var(--gep-navy);
        border-radius: 50%;
        background-color: var(--gep-ciano);
    }

    /*
       Some com o painel de filtros aberto (não tem função) e com o menu do
       site aberto (são dois painéis na mesma tela, e ele ficava por cima).
       A segunda classe é posta pelo JS, que observa o menu.
    */
    body.gep-drawer-travado .gep-drawer-abrir,
    .gep-drawer-abrir--oculto {
        opacity: 0;
        pointer-events: none;
    }

    /* espaço para o botão não cobrir a paginação nem o começo do rodapé */
    body:not(.layout-admin) section.gep-blog-secao {
        padding-bottom: 96px;
    }

    /*
       O "voltar ao topo" sobe para cima do botão de filtros.

       Ele é criado pelo core.min.js como
       `<a id="btnScrollTo" class="btn btn-secondary position-fixed end-0 bottom-0 m-2">`,
       ou seja, encostado no mesmo canto — e ficava atrás do botão de
       filtros. A margem do template (`m-2`) é zerada para que o
       posicionamento venha só daqui: 16px de base + 52px do botão de
       filtros + 10px entre os dois.

       A classe no body é posta pelo JS quando o botão de filtros aparece,
       de modo que nas demais páginas do site o botão continua onde estava.
    */
    body.gep-com-drawer #btnScrollTo {
        /*
           Os três com !important porque é o que as utilitárias do template
           usam: `.end-0 { right: 0 !important }`, `.bottom-0 { bottom: 0
           !important }` e `.m-2 { margin: .5rem !important }`. Sem igualar a
           prioridade, a regra não encosta nelas.
        */
        right: 16px !important;
        bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
        margin: 0 !important;

        /*
           Empilhados, os dois viram um par, e o cinza quadrado do
           `.btn-secondary` do template ao lado do botão navy arredondado
           parecia peça de outro site. Fica redondo, branco e discreto: é o
           controle secundário do par, e não deve competir com o principal.

           Sem !important no `display`, de propósito: o template mostra e
           esconde o botão com jQuery.fadeIn/fadeOut, que escreve
           `display: none` no atributo style. Com !important aqui, esse
           inline perderia e o botão ficaria visível o tempo todo, desde o
           topo da página. A especificidade de `body.classe #id` já basta
           para vencer o `.btn` do template.
        */
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 1px solid var(--gep-borda);
        border-radius: 50%;
        background-color: #fff;
        color: var(--gep-texto);
        box-shadow: 0 4px 14px rgba(1, 51, 73, .16);
    }

    /* com o painel aberto, os dois somem juntos */
    body.gep-drawer-travado #btnScrollTo {
        opacity: 0;
        pointer-events: none;
    }

    /* escurece e bloqueia o toque no que está atrás */
    .gep-drawer-fundo {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1050;
        width: 100%;
        height: 100%;
        background-color: rgba(1, 22, 31, .5);
        animation: gepEntra .2s ease both;
    }

    .gep-drawer-fundo[hidden] {
        display: none;
    }

    /*
       z-index acima do cabeçalho fixo do template (1030) e do próprio fundo.
       `translateX(100%)` em vez de `display: none` para que a entrada seja
       animada e o conteúdo continue no DOM — o leitor de tela encontra o
       painel pelo aria-controls do botão.
    */
    .gep-drawer {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1060;
        /*
           Coluna flex para que um rodapé com `margin-top: auto` (o "Ver N
           resultados" do catálogo) encoste na base do painel mesmo quando os
           filtros são curtos e não há transbordo. Só com `sticky` ele ficaria
           logo abaixo do último campo, flutuando no meio do branco.
        */
        flex-direction: column;
        width: min(340px, 88vw);
        padding: 0 20px 28px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        background-color: #fff;
        box-shadow: -8px 0 30px rgba(1, 51, 73, .18);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform .28s var(--gep-easing), visibility .28s;
    }

    /* sem isto o conteúdo se comprime em vez de rolar quando o painel enche */
    .gep-drawer > * {
        flex: 0 0 auto;
    }

    /* no painel, a coluna do blog perde o sticky que ela tem no desktop */
    .gep-blog-lateral.gep-drawer {
        position: fixed;
    }

    .gep-drawer--aberto {
        transform: translateX(0);
        visibility: visible;
    }

    /*
       Cabeçalho do painel grudado no topo: a lista de mais lidos rola, e sem
       isto o botão de fechar sobe junto e some.
    */
    .gep-drawer-topo {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 1;
        align-items: center;
        justify-content: space-between;
        margin: 0 -20px 8px;
        padding: 16px 20px;
        border-bottom: 1px solid var(--gep-borda);
        background-color: #fff;
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--gep-rotulo);
    }

    .gep-drawer-topo button {
        width: 40px;
        height: 40px;
        margin-right: -8px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: transparent;
        font-size: 15px;
        color: var(--gep-texto);
        cursor: pointer;
    }

    .gep-drawer-topo button:hover {
        background-color: #f1f4f8;
    }

    .gep-blog-bloco:first-of-type {
        padding-top: 8px;
    }

    /*
       Trava a rolagem do fundo enquanto o painel está aberto: rolar a lista
       atrás dele faz a pessoa perder o lugar sem perceber. A classe é posta
       e tirada pelo JS.
    */
    body.gep-drawer-travado {
        overflow: hidden;
    }
}

@media (max-width: 767.98px) {

    body:not(.layout-admin) section.gep-blog-secao {
        padding: 0 0 56px;
    }

    /*
       A faixa de assuntos sai do sticky no celular: o cabeçalho do template
       já ocupa o topo, e duas barras fixas comem um terço da tela de um
       aparelho pequeno. Ela continua rolando na horizontal.
    */
    .gep-blog-assuntos {
        position: static;
        margin: 0 0 28px;
        /*
           Sangra até a borda da tela: a faixa que rola precisa encostar nos
           cantos, senão o último assunto parece o fim da lista. O padding
           devolve o alinhamento do container ao primeiro item.
        */
        margin-right: -15px;
        margin-left: -15px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .gep-blog-assuntos ul {
        padding: 0 15px;
    }

    .gep-blog-destaque {
        margin-bottom: 36px;
        padding-bottom: 36px;
    }

    .gep-blog-destaque-titulo {
        font-size: 25px;
    }

    .gep-blog-destaque-chamada {
        font-size: 15px;
    }

    /*
       No celular a miniatura vai para cima do texto e ocupa a largura toda.
       Ela encolhia junto com a tela e, abaixo de uns 400px, virava um selo
       de 90px ao lado de três linhas de título — pequena demais para dizer
       do que trata o texto e grande o bastante para roubar a largura dele.
    */
    .gep-blog-item-link {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .gep-blog-item-capa {
        aspect-ratio: 16 / 9;
    }

    @supports not (aspect-ratio: 16 / 9) {
        .gep-blog-item-capa {
            height: 200px;
        }
    }

    .gep-blog-item + .gep-blog-item {
        margin-top: 28px;
        padding-top: 28px;
    }

    .gep-blog-item-titulo {
        font-size: 20px;
    }

    /*
       16px nos campos não é escolha estética: abaixo disso o Safari do iPhone
       dá zoom na página ao focar o campo, e a pessoa fica com a tela torta
       depois de digitar uma letra na busca.
    */
    .gep-blog-busca-campo .form-control,
    .gep-blog-autor .form-control {
        font-size: 16px;
    }

    .gep-blog-paginacao {
        margin-top: 36px;
        padding-top: 24px;
        gap: 6px;
    }

    /*
       Os números encolhem no padding, nunca na altura: 44px é o alvo de
       toque mínimo, e paginação errada por dedo grande é recarga de página.
       Quem some é o rótulo das setas, não a área clicável.
    */
    .gep-blog-pag {
        min-width: 44px;
        padding: 0 8px;
        font-size: 13px;
    }

    .gep-blog-pag--seta span {
        display: none;
    }

    body:not(.layout-admin) section.gep-artigo-secao {
        padding: 28px 0 48px;
    }

    .gep-artigo-corpo p {
        font-size: 17px !important;
    }

    .gep-artigo-corpo blockquote {
        padding-left: 16px;
        font-size: 17px;
    }

    .gep-artigo-capa {
        margin: 22px 0 26px;
    }

    /*
       Teto de altura na capa. As artes do acervo não têm proporção única, e
       um retrato ocupava a tela inteira do celular: a pessoa abria o texto e
       via só a foto, sem uma linha do que veio ler. `object-fit: contain`
       porque muitas capas são cartaz com texto, e recortar cortaria palavra.
    */
    .gep-artigo-capa img {
        max-height: 52vh;
        object-fit: contain;
        border-radius: 8px;
    }

    .gep-artigo-ficha {
        padding: 20px;
    }

    .gep-artigo-rodape {
        flex-direction: column;
        gap: 20px;
    }

    body:not(.layout-admin) section.gep-blog-relacionados {
        padding: 40px 0 48px;
    }

    .gep-blog-relacionados-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}


/* ------------------------------------------------------------------
   9. Psicocine
   Markup em views/cultura-comunidade/ e seus componentes.

   A tela é um ACERVO: 28 sessões já realizadas, e nenhuma marcada desde
   junho de 2024. Por isso a forma é lista cronológica com a data em
   destaque, e não vitrine — o que se procura aqui é "que filme foi
   discutido, por quem, e tem vídeo?".
------------------------------------------------------------------ */

/* ---------- faixa das condições de participação ---------- */

/*
   Gratuito e aberto a quem não é da área é o que mais decide se alguém
   aparece num evento de um grupo de psicanálise. Estava dito de passagem
   no fim do subtítulo e no meio de um parágrafo; aqui vira a primeira
   coisa depois do cabeçalho.

   Colada ao cabeçalho, sem respiro acima: lida como continuação dele, e
   não como mais uma seção que se pode pular.
*/
body:not(.layout-admin) section.gep-cine-faixa {
    padding: 0;
    border-bottom: 1px solid var(--gep-borda);
    background-color: #f6f9fb;
}

.gep-cine-faixa ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px 32px;
    margin: 0;
    padding: 22px 0;
    list-style: none;
}

.gep-cine-faixa li {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}

.gep-cine-faixa i {
    flex: 0 0 auto;
    margin-top: 3px;
    font-size: 17px;
    color: var(--gep-ciano-texto);
}

.gep-cine-faixa strong {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-cine-faixa span {
    font-size: 13px;
    line-height: 1.5;
    color: var(--gep-texto-suave);
}


/* ---------- o que é / próxima sessão ---------- */

body:not(.layout-admin) section.gep-cine-sobre {
    padding: 48px 0 8px;
}

.gep-cine-sobre-grade {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

.gep-cine-sobre-texto h2 {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-cine-sobre-texto p {
    margin-bottom: 1.1rem;
    font-size: 16px;
    line-height: 1.8;
    color: var(--gep-texto-suave);
}

.gep-cine-sobre-texto strong {
    font-weight: 600;
    color: var(--gep-texto);
}

/*
   O bloco da direita responde a uma pergunta só: "tem sessão marcada?".
   No navy da marca porque é a informação que a pessoa veio buscar, e
   precisa se destacar do texto explicativo ao lado.
*/
.gep-cine-proxima {
    padding: 28px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--gep-navy-escuro) 0%, #014963 100%);
    color: #fff;
}

.gep-cine-proxima-etiqueta {
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gep-ciano);
}

.gep-cine-proxima-filme {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: #fff;
}

.gep-cine-proxima-quando {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.gep-cine-proxima-com {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, .78);
}

.gep-cine-proxima-btn {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    margin-top: 18px;
    padding: 11px 20px;
    border-radius: 6px;
    background-color: var(--gep-ciano);
    font-size: 14px;
    font-weight: 600;
    color: var(--gep-navy-escuro);
    text-decoration: none;
    transition: background-color .2s ease;
}

.gep-cine-proxima-btn:hover {
    background-color: #fff;
    color: var(--gep-navy-escuro);
    text-decoration: none;
}

.gep-cine-proxima-btn i {
    font-size: 11px;
}

.gep-cine-proxima-redes {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.gep-cine-proxima-redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    font-size: 16px;
    color: #fff;
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gep-cine-proxima-redes a:hover {
    border-color: var(--gep-ciano);
    background-color: var(--gep-ciano);
    color: var(--gep-navy-escuro);
    text-decoration: none;
}


/* ---------- lista de sessões ---------- */

body:not(.layout-admin) section.gep-cine-secao {
    padding: 48px 0 80px;
}

.gep-cine-titulo {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 300;
    color: var(--gep-texto);
}

/* navegação por ano, no mesmo formato do arquivo do blog */
.gep-cine-anos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gep-borda);
}

.gep-cine-ano-link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: #fff;
    font-size: 14px;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gep-cine-ano-link:hover {
    border-color: var(--gep-azul);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-cine-ano-link--ativo {
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    color: #fff;
}

.gep-cine-ano-link--ativo:hover {
    border-color: var(--gep-azul);
    background-color: var(--gep-azul);
    color: #fff;
}

.gep-cine-ano-link span {
    font-size: 11px;
    opacity: .7;
}

.gep-cine-lista {
    display: flex;
    flex-direction: column;
}

.gep-cine-sessao {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.gep-cine-sessao + .gep-cine-sessao {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--gep-borda);
}


/* ---------- bloco de data ---------- */

/*
   Data em bloco, à esquerda: numa lista cronológica ela é a âncora de
   leitura. Como texto corrido dentro da ficha, se perdia entre o horário
   e o nome do comentador.
*/
.gep-cine-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 6px 8px;
    border-radius: 8px;
    background-color: #f2f6f9;
    text-align: center;
}

.gep-cine-dia {
    font-family: var(--gep-serif, Georgia, serif);
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    color: var(--gep-navy);
}

.gep-cine-mes {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    color: var(--gep-ciano-texto);
}

.gep-cine-ano {
    margin-top: 4px;
    font-size: 11px;
    color: var(--gep-rotulo);
}


/* ---------- ficha da sessão ---------- */

.gep-cine-filme {
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--gep-texto);
}

/*
   "Presencial" ao lado do título. A diferença entre a sessão na sede e a
   que foi por videoconferência (2020 e 2021, no Zoom) estava só nos dados:
   quem tinha endereço era presencial, e a tela não dizia.
*/
.gep-cine-selo {
    display: inline-block;
    position: relative;
    top: -2px;
    margin-left: 8px;
    padding: 3px 10px;
    border-radius: 100px;
    background-color: rgba(0, 192, 202, .14);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gep-ciano-texto);
    vertical-align: middle;
}

/*
   Mapa da sessão presencial. O de antes tinha 600x450 cravados nos atributos
   e estourava a largura do celular; aqui a caixa é fluida, com proporção
   fixa para não empurrar o conteúdo quando o mapa termina de carregar.
*/
.gep-cine-mapa {
    max-width: 480px;
    margin-top: 16px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    border: 1px solid var(--gep-borda);
    border-radius: 8px;
    background-color: #eef1f6;
}

.gep-cine-mapa iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

@supports not (aspect-ratio: 16 / 10) {
    .gep-cine-mapa {
        height: 260px;
    }
}

/*
   O comentador é a segunda informação do card, depois do filme: num grupo
   de estudos é quem conduz a discussão que distingue uma sessão da outra.
   Por isso sai da ficha e ganha linha própria, com o rótulo à vista — antes
   era só o nome, solto entre o horário e o link, sem dizer o que era.
*/
.gep-cine-comentador {
    margin: 0 0 8px;
    font-size: 15px;
    color: var(--gep-texto-suave);
}

.gep-cine-comentador span {
    color: var(--gep-rotulo);
}

.gep-cine-comentador strong {
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-cine-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* rótulo escrito onde o conjunto de ícones do template não tem símbolo */
.gep-cine-rotulo {
    color: var(--gep-rotulo);
}

.gep-cine-ficha li {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    font-size: 14px;
    color: var(--gep-texto-suave);
}

.gep-cine-ficha i {
    font-size: 13px;
    color: var(--gep-rotulo);
}

.gep-cine-ficha a {
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-cine-ficha a:hover {
    color: var(--gep-ciano-texto);
    text-decoration: underline;
}


/* ---------- vídeo e podcast ---------- */

/*
   Largura contida: o vídeo é complemento da ficha, não o assunto da tela.
   Ocupando a coluna inteira, oito capas de vídeo transformavam a lista
   numa galeria e enterravam as sessões sem gravação.
*/
.gep-cine-midia {
    max-width: 380px;
    margin-top: 16px;
}

.gep-cine-midia--podcast {
    max-width: none;
}

/*
   A capa do YouTube, com o botão de play desenhado por cima. Substitui o
   player inteiro até alguém clicar — ver views/_assets/js/psicocine.
*/
.gep-midia-video {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background-color: #01161f;
    text-decoration: none;
}

.gep-midia-video img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
       A miniatura do YouTube vem em 4:3 com tarjas pretas em cima e embaixo.
       `scale(1.35)` corta as tarjas para preencher a caixa 16:9 — é o
       recorte que o próprio YouTube faz nas suas listagens.
    */
    transform: scale(1.35);
    transition: opacity .2s ease;
}

.gep-midia-video:hover img {
    opacity: .85;
}

.gep-midia-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 58px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(1, 22, 31, .78);
    transform: translate(-50%, -50%);
    transition: background-color .2s ease;
}

/* o triângulo do play, em CSS: uma imagem a menos para baixar */
.gep-midia-play:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 13px solid #fff;
    transform: translate(-40%, -50%);
}

.gep-midia-video:hover .gep-midia-play {
    background-color: var(--gep-ciano-texto);
}

.gep-midia-rotulo {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
}

.gep-midia-audio {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    padding: 10px 18px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: #fff;
    font-size: 14px;
    color: var(--gep-texto);
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.gep-midia-audio:hover {
    border-color: var(--gep-azul);
    color: var(--gep-azul);
}

.gep-midia-audio i {
    color: var(--gep-rotulo);
}

/* a moldura que o JS põe no lugar da capa */
.gep-midia-frame {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    background-color: #01161f;
}

.gep-midia-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* o player do Spotify tem altura própria e não é 16:9 */
.gep-midia-frame--audio {
    aspect-ratio: auto;
    height: 152px;
    max-width: 560px;
    border-radius: 12px;
}


/* ---------- nenhuma sessão / dúvida ---------- */

.gep-cine-vazio {
    padding: 48px 24px;
    border: 1px dashed var(--gep-borda);
    border-radius: 10px;
    text-align: center;
}

.gep-cine-vazio p {
    margin: 0 0 12px;
    color: var(--gep-texto-suave);
}

.gep-cine-vazio a {
    color: var(--gep-azul);
}

.gep-cine-duvida {
    margin: 40px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--gep-borda);
    font-size: 14px;
    color: var(--gep-texto-suave);
}

.gep-cine-duvida a {
    color: var(--gep-azul);
}


/* ---------- responsivo ---------- */

@media (max-width: 991.98px) {

    .gep-cine-sobre-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    /* três colunas de texto não cabem num tablet sem virar palavra por linha */
    .gep-cine-faixa ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    body:not(.layout-admin) section.gep-cine-sobre {
        padding: 36px 0 4px;
    }

    .gep-cine-faixa ul {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 18px 0;
    }

    body:not(.layout-admin) section.gep-cine-secao {
        padding: 32px 0 56px;
    }

    /*
       A data passa a ser uma linha acima do título, em vez de coluna ao
       lado: com 76px reservados à esquerda numa tela de 360px, o nome do
       filme ficava espremido em três linhas.
    */
    .gep-cine-sessao {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .gep-cine-data {
        flex-direction: row;
        gap: 6px;
        align-items: baseline;
        justify-content: flex-start;
        width: fit-content;
        padding: 5px 12px;
    }

    .gep-cine-dia {
        font-size: 17px;
    }

    .gep-cine-filme {
        font-size: 18px;
    }

    .gep-cine-midia {
        max-width: none;
    }

    .gep-cine-proxima {
        padding: 22px;
    }

    .gep-cine-proxima-filme {
        font-size: 19px;
    }
}

/* ------------------------------------------------------------------
   10. Lives
   "Conversando sobre Psicanálise" — markup em views/live/.

   A capa de vídeo, o botão de play e a moldura do iframe NÃO estão aqui:
   são `.gep-midia-*`, compartilhadas com o Psicocine (seção 9), porque as
   duas telas fazem a mesma coisa — adiar o player até o clique.
------------------------------------------------------------------ */

/* ---------- o que é + retratos ---------- */

body:not(.layout-admin) section.gep-live-sobre {
    padding: 56px 0 8px;
}

/*
   Retratos à esquerda, texto à direita — a mesma divisão que a tela tinha.
   A coluna dos retratos vem primeiro no CSS e por `order` no visual, mas
   depois no DOM: quem lê por leitor de tela ouve a explicação antes da
   galeria, que é a ordem que faz sentido.
*/
/*
   A coluna dos retratos é a mais estreita das duas: as fotos são verticais,
   e quanto mais larga a coluna, mais achatada fica cada caixa e mais o
   `cover` corta do rosto.
*/
.gep-live-sobre-grade {
    display: grid;
    grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.gep-live-sobre-texto-bloco {
    order: 2;
}

.gep-live-sobre-texto-bloco h2 {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-live-sobre-texto-bloco p {
    margin-bottom: 1.1rem;
    font-size: 16px;
    line-height: 1.8;
    color: var(--gep-texto-suave);
}

.gep-live-sobre-texto-bloco strong {
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-live-instagram {
    display: inline-flex;
    gap: 9px;
    align-items: center;
    margin-top: 4px;
    padding: 11px 20px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gep-texto);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gep-live-instagram:hover {
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    color: #fff;
    text-decoration: none;
}

.gep-live-instagram i {
    font-size: 16px;
    color: var(--gep-ciano-texto);
}

.gep-live-instagram:hover i {
    color: #fff;
}

/*
   Tira de retratos dos autores de que a série trata.

   Antes eram cinco imagens soltas em duas colunas, com o nome num <small>
   branco solto embaixo — a legenda de uma colava na imagem da seguinte.
   Agora o nome entra SOBRE o retrato, num gradiente que nasce da base: a
   legenda para de disputar espaço com a foto de baixo, e cada retrato vira
   um bloco fechado.
*/
/*
   Mosaico assimétrico de duas colunas: Freud ocupa a altura de dois, os
   outros quatro ficam em quadrados.

   Cinco retratos de mesmo tamanho em duas colunas ocupariam três linhas
   cheias, e a coluna das imagens ficava muito mais alta que o texto ao
   lado. Com o primeiro em destaque, o conjunto fecha em três linhas curtas
   e cada foto continua grande o bastante para se reconhecer quem é — que
   era o problema da fileira de cinco.
*/
.gep-live-retratos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    /*
       Altura de linha FIXA, não `1fr`: com fração, a linha cresce para
       preencher o que sobra e os cinco retratos viram cinco painéis de
       meia tela.

       190px, e não menos: as cinco fotos são retratos VERTICAIS, e numa
       caixa larga e baixa o `cover` corta pela testa e pelo queixo — com
       148px o rosto de Klein e o de Winnicott apareciam pela metade. Nesta
       altura a caixa dos quatro menores fica quase quadrada, que é o
       recorte que um retrato aguenta.
    */
    grid-auto-rows: 190px;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-live-retratos li:first-child {
    grid-row: span 2;
}

/*
   Caixa 3:4 com `cover`. As imagens têm proporções diferentes — o retrato
   de Green é paisagem (500x220) e os outros são verticais —, e sem caixa
   fixa a tira sai com cinco alturas.

   `object-position: top` porque são retratos: cortar pela base preserva o
   rosto, cortar pelo centro corta a testa.
*/
/*
   Sem `aspect-ratio` nos itens: quem manda na altura é o grid
   (`grid-auto-rows: 1fr`), para que o bloco de Freud tenha exatamente a
   altura de dois quadrados mais o vão entre eles. Com proporção fixa em
   cada item, as duas colunas saíam desencontradas.
*/
.gep-live-retratos li {
    position: relative;
    overflow: hidden;
    min-height: 150px;
    border-radius: 12px;
    background-color: var(--gep-navy-escuro);
    transition: transform .3s var(--gep-easing), box-shadow .3s var(--gep-easing);
}

.gep-live-retratos li:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(1, 51, 73, .22);
}

/*
   Duotone: o retrato entra dessaturado e recebe o navy por cima, o que dá
   à tira inteira uma cor só — são cinco fotos de arquivo, de épocas e
   qualidades diferentes, e sem isso a fileira parece recortada de cinco
   lugares. No hover a foto volta ao natural.
*/
.gep-live-retratos img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*
       `center 22%`, e não `top`: as caixas dos quatro menores são mais
       largas que altas, e ancorar no topo cortava o retrato na altura da
       testa. 22% mantém o enquadramento no rosto tanto na caixa alta de
       Freud quanto nas quatro horizontais.
    */
    object-position: center 22%;
    filter: grayscale(1) contrast(1.05);
    opacity: .82;
    transition: filter .4s ease, opacity .4s ease, transform .5s var(--gep-easing);
}

.gep-live-retratos li:hover img {
    filter: grayscale(0) contrast(1);
    opacity: 1;
    transform: scale(1.04);
}

/* o véu navy que amarra as cinco fotos, e some no hover */
.gep-live-retratos li:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background-color: var(--gep-navy);
    mix-blend-mode: color;
    opacity: .55;
    transition: opacity .4s ease;
    pointer-events: none;
}

.gep-live-retratos li:hover:before {
    opacity: 0;
}

/*
   Gradiente sob o nome. Sem ele o texto branco cai em cima de uma gola
   clara ou de um fundo estourado e some — as fotos são de arquivo, e não
   dá para contar com o que há na base de cada uma.
*/
.gep-live-retratos span {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    padding: 22px 10px 10px;
    background: linear-gradient(180deg, rgba(1, 22, 31, 0) 0%, rgba(1, 22, 31, .88) 58%);
    line-height: 1.2;
    color: #fff;
}

.gep-live-retratos small {
    display: block;
    font-size: 10px;
    color: rgba(255, 255, 255, .72);
}

.gep-live-retratos strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
}


/* ---------- lista de episódios ---------- */

body:not(.layout-admin) section.gep-live-secao {
    padding: 48px 0 80px;
}

.gep-live-titulo-secao {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-live-categorias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--gep-borda);
}

.gep-live-categoria-link {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: #fff;
    font-size: 14px;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gep-live-categoria-link:hover {
    border-color: var(--gep-azul);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-live-categoria-link--ativo {
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    color: #fff;
}

.gep-live-categoria-link--ativo:hover {
    border-color: var(--gep-azul);
    background-color: var(--gep-azul);
    color: #fff;
}

.gep-live-categoria-link span {
    font-size: 11px;
    opacity: .7;
}

/*
   340px de mínimo por card — três por linha num monitor comum, dois num
   tablet. O piso é alto porque o card é um vídeo: as capas destas lives
   têm texto e vários rostos lado a lado, e abaixo disso não se reconhece
   mais quem está na tela.
*/
.gep-lives {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 36px 32px;
}

.gep-live-capa {
    margin-bottom: 14px;
}

.gep-live-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin: 0 0 6px;
    font-size: 12px;
    color: var(--gep-rotulo);
}

.gep-live-categoria {
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gep-ciano-texto);
}

.gep-live-titulo {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gep-texto);
}

.gep-live-autor {
    margin: 0 0 8px;
    font-size: 14px;
}

.gep-live-autor span {
    color: var(--gep-rotulo);
}

.gep-live-autor strong {
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-live-resumo {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--gep-texto-suave);
}

.gep-live-vazio {
    padding: 48px 24px;
    border: 1px dashed var(--gep-borda);
    border-radius: 10px;
    text-align: center;
}

.gep-live-vazio p {
    margin: 0 0 12px;
    color: var(--gep-texto-suave);
}

.gep-live-vazio a {
    color: var(--gep-azul);
}


/* ---------- responsivo ---------- */

@media (max-width: 991.98px) {

    /*
       Uma coluna só: o texto volta para cima (é a explicação) e o mosaico
       ganha a largura inteira abaixo, em três colunas.
    */
    .gep-live-sobre-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .gep-live-sobre-texto-bloco {
        order: 0;
    }

    /* na largura inteira, os cinco cabem em quatro colunas com Freud maior */
    .gep-live-retratos {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {

    body:not(.layout-admin) section.gep-live-sobre {
        padding: 36px 0 4px;
    }

    body:not(.layout-admin) section.gep-live-secao {
        padding: 32px 0 56px;
    }

    /*
       Duas colunas no celular. Em três, cada retrato fica com ~105px numa
       tela de 360px — selo em que não se reconhece rosto nenhum.
    */
    .gep-live-retratos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .gep-lives {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }
}

/* ------------------------------------------------------------------
   11. Instituto de Psicanálise
   A página da formação psicanalítica — markup em
   views/formacao-psicanalitica/.

   A capa de vídeo, o botão de play e a moldura do iframe NÃO estão aqui:
   são `.gep-midia-*` (seção 9), as mesmas do Psicocine e das Lives,
   porque as três telas fazem a mesma coisa — adiar o player até o clique.
------------------------------------------------------------------ */

/* ---------- coluna de seções ---------- */

body:not(.layout-admin) .gep-instituto-corpo {
    padding: 48px 0 80px;
}

/*
   O template aplica `body:not(.layout-admin) section { padding: 100px 0 }`,
   e quem dá o respiro desta tela é o bloco acima, uma vez só. Sem zerar
   aqui, os 100px do template entram DE NOVO dentro de cada seção: eram
   148px entre o cabeçalho e o primeiro conteúdo, e a coluna de abas ficava
   cem pixels acima do texto que ela anuncia.

   Mesma redeclaração das seções 2, 6 e 7 — a especificidade precisa casar
   a do template, por isso o `body:not(.layout-admin)`.
*/
body:not(.layout-admin) section.gep-instituto-secao {
    padding: 0;
}

/*
   Duas colunas: navegação à esquerda, conteúdo à direita — a divisão que
   a tela sempre teve. A coluna é a mais estreita possível para caber o
   rótulo mais longo numa linha; o resto é texto, e texto quer largura.
*/
.gep-instituto-grade {
    display: grid;
    grid-template-columns: 224px minmax(0, 1fr);
    gap: 56px;
    align-items: start;
}

/*
   Acompanha a rolagem: as três seções são longas, e sem isto trocar de
   seção no fim de um texto exige subir a página inteira.

   Era o `sticky-kit` — plugin jQuery que mede a coluna e a reposiciona a
   cada evento de scroll. `position: sticky` faz o mesmo no navegador, sem
   JavaScript nenhum.

   O `top` é medido, não herdado: o cabeçalho do template é `fixed` e, já
   rolado (sem a barra de telefones, que sobe junto com a página), sua base
   fica em 118px. Com os 72px que o blog usa, o primeiro item da coluna
   nascia atrás do cabeçalho.
*/
.gep-instituto-abas {
    position: sticky;
    top: 132px;
}

.gep-instituto-abas ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
   Barra de acento à esquerda em vez da pílula azul sólida do template:
   com três itens empilhados, o retângulo cheio pesa mais que o título da
   seção que ele anuncia.
*/
.gep-instituto-aba {
    display: block;
    padding: 11px 16px;
    border-left: 2px solid var(--gep-borda);
    font-size: 15px;
    line-height: 1.4;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.gep-instituto-aba:hover,
.gep-instituto-aba:focus {
    border-left-color: var(--gep-azul);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-instituto-aba--ativa {
    border-left-color: var(--gep-ciano);
    background-color: #f2fbfc;
    font-weight: 600;
    color: var(--gep-texto);
}

/*
   Quando a troca de seção rola a página de volta, o alvo tem de parar
   ABAIXO do cabeçalho fixo — sem isto o começo da seção nasce escondido
   atrás dele.
*/
#instituto-secoes {
    scroll-margin-top: 132px;
}


/* ---------- corpo das seções ---------- */

/*
   Medida de leitura. `.gep-conteudo` já limita a 720px o texto que vem do
   banco; aqui o texto é da própria view, e vale o mesmo limite — linha de
   17px com 1180px de largura passa de 120 caracteres, e o olho perde a
   volta ao trocar de linha.

   A coluna fica encostada à ESQUERDA, e não centrada: a grade dos vídeos
   e a lista das etapas ocupam a largura inteira do container, e com o
   texto centrado os dois blocos começavam em margens diferentes.
*/

.gep-instituto-titulo {
    max-width: 720px;
    margin: 56px 0 8px;
    font-size: 26px;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-instituto-intro {
    max-width: 720px;
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}


/* ---------- aviso do processo seletivo ---------- */

/*
   O estado do processo seletivo, no alto da página: é a pergunta que traz
   a pessoa aqui. A cor da borda separa o que exige ação hoje do que é
   apenas informação — ciano para inscrição aberta, cinza para encerrada.
*/
.gep-instituto-aviso {
    max-width: 720px;
    margin: 0 0 48px;
    padding: 22px 26px;
    border: 1px solid var(--gep-borda);
    border-left: 4px solid var(--gep-rotulo);
    border-radius: 10px;
    background-color: #f7f9fb;
}

.gep-instituto-aviso--aberto,
.gep-instituto-aviso--antes {
    border-left-color: var(--gep-ciano);
    background-color: #f2fbfc;
}

.gep-instituto-aviso-rotulo {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

.gep-instituto-aviso-texto {
    margin: 0;
    font-size: 17px;
    line-height: 1.6;
    color: var(--gep-texto-suave);
}

.gep-instituto-aviso-texto strong {
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-instituto-aviso-link {
    display: inline-flex;
    align-items: center;
    margin-top: 14px;
    padding: 10px 20px;
    border-radius: 100px;
    background-color: var(--gep-navy);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease;
}

.gep-instituto-aviso-link:hover,
.gep-instituto-aviso-link:focus {
    background-color: var(--gep-azul);
    color: #fff;
    text-decoration: none;
}


/* ---------- assinatura ---------- */

/*
   O texto de abertura é uma carta, e a assinatura é o que diz de quem ela
   vem. Era o mesmo parágrafo cinzento dos demais, com dois <br>.
*/
.gep-instituto-assinatura {
    max-width: 720px;
    margin: 0 0 8px;
    padding-left: 16px;
    border-left: 3px solid var(--gep-ciano);
}

.gep-instituto-assinatura strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-instituto-assinatura span {
    display: block;
    margin-top: 2px;
    font-size: 14px;
    color: var(--gep-rotulo);
}


/* ---------- selo de filiação ---------- */

/*
   Markup em views/formacao-psicanalitica/componentes/filiacao-ipa.php,
   usado no fim de "O Instituto" e de "Como é a formação".
*/
.gep-instituto-filiacao {
    max-width: 720px;
    margin: 48px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--gep-borda);
}

.gep-instituto-filiacao p {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gep-rotulo);
}

.gep-instituto-filiacao strong {
    font-weight: 600;
    color: var(--gep-texto-suave);
}

.gep-instituto-filiacao ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
   O endereço fica à vista, e não escondido atrás do nome da entidade: num
   site institucional o domínio é parte da credencial, e é assim que ele
   estava antes — uma linha `www.ipa.world` fechando a seção.
*/
.gep-instituto-filiacao a {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    background-color: #fff;
    font-size: 13px;
    color: var(--gep-texto-suave);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.gep-instituto-filiacao a:hover,
.gep-instituto-filiacao a:focus {
    border-color: var(--gep-azul);
    color: var(--gep-azul);
    text-decoration: none;
}

.gep-instituto-filiacao i {
    font-size: 13px;
    color: var(--gep-ciano-texto);
}

.gep-instituto-filiacao a:hover i {
    color: var(--gep-azul);
}


/* ---------- depoimentos em vídeo ---------- */

.gep-instituto-videos {
    margin-top: 64px;
    padding-top: 48px;
    border-top: 1px solid var(--gep-borda);
}

.gep-instituto-videos h2 {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-instituto-videos-intro {
    max-width: 620px;
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}

/*
   Três por linha no desktop. Eram `col-6` em TODAS as larguras: no
   celular, seis vídeos de meia tela, com o rosto de quem fala do tamanho
   de uma unha.
*/
.gep-instituto-videos-grade {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-instituto-video-nome {
    margin: 14px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--gep-texto);
}

/*
   O tema em linha própria, como texto. Era um `<a href="#!">` — link que
   não leva a lugar nenhum, e que o leitor de tela anuncia como link.
*/
.gep-instituto-video-tema {
    margin: 2px 0 0;
    font-size: 13px;
    color: var(--gep-rotulo);
}

.gep-instituto-playlist {
    display: inline-flex;
    align-items: center;
    margin-top: 36px;
    padding: 11px 20px;
    border: 1px solid var(--gep-borda);
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gep-texto);
    text-decoration: none;
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.gep-instituto-playlist:hover,
.gep-instituto-playlist:focus {
    border-color: var(--gep-navy);
    background-color: var(--gep-navy);
    color: #fff;
    text-decoration: none;
}


/* ---------- foto histórica ---------- */

.gep-instituto-figura {
    max-width: 720px;
    margin: 0 0 44px;
}

.gep-instituto-figura img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 16px 40px rgba(1, 51, 73, .16);
}

.gep-instituto-figura figcaption {
    margin-top: 10px;
    font-size: 13px;
    color: var(--gep-rotulo);
}


/* ---------- aspectos subjetivos ---------- */

.gep-instituto-subjetivos {
    max-width: 720px;
    margin: 0;
    padding: 28px 30px;
    border-radius: 12px;
    background-color: #f7f9fb;
}

.gep-instituto-subjetivos h2 {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-instituto-subjetivos p {
    margin: 0 0 1.1rem;
    font-size: 16px;
    line-height: 1.8;
    color: var(--gep-texto-suave);
}

.gep-instituto-subjetivos p:last-child {
    margin-bottom: 0;
}


/* ---------- as cinco etapas ---------- */

/*
   Número à esquerda, texto à direita. As etapas eram trinta parágrafos
   seguidos, com "1. Análise Pessoal:" dentro de um <strong> no meio da
   corrida: não dava para ver, de relance, que a formação tem cinco
   etapas nem onde cada uma começa.
*/
.gep-instituto-etapas {
    max-width: 780px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-instituto-etapas > li {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.gep-instituto-etapas > li + li {
    margin-top: 28px;
    padding-top: 28px;
    border-top: 1px solid var(--gep-borda);
}

.gep-instituto-etapa-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: var(--gep-navy);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
}

.gep-instituto-etapa-corpo h3 {
    margin: 10px 0 4px;
    font-size: 20px;
    font-weight: 600;
    color: var(--gep-texto);
}

/*
   Uma linha dizendo o tamanho do compromisso — quantas sessões, quantos
   anos. É o que alguém quer saber antes de ler os quatro parágrafos, e
   estava diluído dentro deles.
*/
.gep-instituto-etapa-resumo {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 500;
    color: var(--gep-ciano-texto);
}

.gep-instituto-etapa-corpo p {
    margin: 0 0 1rem;
    font-size: 16px;
    line-height: 1.8;
    color: var(--gep-texto-suave);
}

.gep-instituto-etapa-corpo p:last-child {
    margin-bottom: 0;
}

.gep-instituto-fecho {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--gep-borda);
}


/* ---------- o edital ---------- */

.gep-edital {
    max-width: 780px;
}

.gep-edital-topo {
    padding-bottom: 28px;
    border-bottom: 1px solid var(--gep-borda);
}

.gep-edital-rotulo {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

.gep-edital-topo h2 {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 300;
    color: var(--gep-texto);
}

.gep-edital-entidade {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}

.gep-edital-estado {
    display: inline-block;
    margin: 18px 0 0;
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 500;
}

.gep-edital-estado--aberto,
.gep-edital-estado--antes {
    background-color: #e6f8f9;
    color: #00707a;
}

.gep-edital-estado--encerrado {
    background-color: #f0f2f5;
    color: var(--gep-texto-suave);
}

.gep-edital-bloco {
    margin-top: 40px;
}

.gep-edital-bloco h3 {
    margin: 0 0 16px;
    font-size: 21px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-edital-bloco > p {
    margin: 0 0 1rem;
    font-size: 16px;
    line-height: 1.8;
    color: var(--gep-texto-suave);
}

.gep-edital-bloco strong {
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-edital-documentos {
    margin: 0;
    padding-left: 22px;
}

.gep-edital-documentos li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}

.gep-edital-nota {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: var(--gep-rotulo);
}


/* ---------- ficha de inscrição ---------- */

/*
   O download da ficha fica junto da lista de documentos, que é onde o
   edital diz "download abaixo". O card existia na tela antiga com
   `style="display: none"`: a frase prometia um arquivo que não aparecia.
*/
.gep-edital-ficha {
    display: inline-flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 14px 22px;
    border: 1px solid var(--gep-borda);
    border-left: 4px solid var(--gep-ciano);
    border-radius: 10px;
    background-color: #fff;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.gep-edital-ficha:hover,
.gep-edital-ficha:focus {
    border-color: var(--gep-borda);
    border-left-color: var(--gep-ciano);
    box-shadow: 0 8px 22px rgba(1, 51, 73, .12);
    text-decoration: none;
}

.gep-edital-ficha-titulo {
    font-size: 16px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-edital-ficha-obs {
    margin-top: 2px;
    font-size: 13px;
    color: var(--gep-rotulo);
}


/* ---------- dados do Pix ---------- */

/*
   Cinco campos que alguém vai COPIAR para o aplicativo do banco. Em linha
   corrida, como estavam, a agência e a conta grudavam uma na outra
   ("Agência 23 - conta número 4393-2") e a chave se perdia no meio do
   parágrafo.
*/
.gep-edital-pix {
    margin-top: 20px;
    padding: 22px 24px;
    border-radius: 12px;
    background-color: #f7f9fb;
}

.gep-edital-pix-titulo {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-edital-pix dl {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 8px 16px;
    margin: 0;
}

.gep-edital-pix dt {
    font-size: 13px;
    font-weight: 600;
    color: var(--gep-rotulo);
}

.gep-edital-pix dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--gep-texto);
}

/* ---------- calendário ---------- */

/*
   Linha do tempo: data à esquerda, etapa à direita. Em prosa, as cinco
   datas ficavam dentro de cinco parágrafos que começavam quase iguais, e
   descobrir quando era a entrevista exigia ler os cinco.
*/
.gep-edital-calendario {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-edital-calendario > li {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
    padding: 18px 0;
    border-top: 1px solid var(--gep-borda);
}

.gep-edital-calendario > li:last-child {
    border-bottom: 1px solid var(--gep-borda);
}

.gep-edital-quando {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--gep-navy);
}

.gep-edital-passo h4 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-edital-passo p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--gep-texto-suave);
}


/* ---------- taxas ---------- */

.gep-edital-taxas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.gep-edital-taxa {
    padding: 22px 24px;
    border: 1px solid var(--gep-borda);
    border-radius: 12px;
    background-color: #fff;
}

.gep-edital-taxa-fase {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gep-rotulo);
}

.gep-edital-taxa-valor {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--gep-navy);
}

.gep-edital-taxa-obs {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--gep-rotulo);
}

/* a assinatura do edital vem depois do bloco de pagamento, e precisa de ar */
.gep-edital .gep-instituto-assinatura {
    margin-top: 44px;
}

.gep-edital-contato {
    margin: 32px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--gep-borda);
    font-size: 15px;
    color: var(--gep-texto-suave);
}

.gep-edital-contato a {
    color: var(--gep-azul);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.gep-edital-contato a:hover {
    color: var(--gep-ciano-texto);
}


/* ---------- celular e tablet ---------- */

@media (max-width: 991.98px) {

    /*
       Abaixo de 992px a coluna da esquerda deixa de caber ao lado do
       texto, e vira uma FAIXA horizontal presa no topo. É a mesma ideia —
       a navegação acompanha a rolagem —, só que na direção em que sobra
       espaço: uma coluna vertical aqui empurraria o conteúdo três blocos
       de largura inteira para baixo, e a primeira tela do telefone seria
       só o menu de seções.

       Mesmo desenho da trilha de assuntos do blog (.gep-blog-assuntos).
    */
    /*
       `block`, e não uma coluna só de grid: item de grid gruda apenas
       dentro da PRÓPRIA área, e a área de uma linha com um item só tem a
       altura do item — a faixa descolava no primeiro rolar. Em bloco, o
       elemento de referência passa a ser esta caixa inteira.
    */
    .gep-instituto-grade {
        display: block;
    }

    .gep-instituto-abas {
        /* encostada na base do cabeçalho fixo, que aqui tem 118px */
        top: 118px;
        /* sangra até a borda da janela, vencendo o padding do container */
        z-index: 20;
        margin: -24px -15px 0;
        padding: 0 15px;
        border-bottom: 1px solid var(--gep-borda);
        background-color: rgba(255, 255, 255, .94);
        backdrop-filter: saturate(180%) blur(8px);
        -webkit-backdrop-filter: saturate(180%) blur(8px);
    }

    /*
       Sem o degradê de "continua para o lado" que a trilha do blog usa: lá
       são quinze assuntos e a faixa nunca cabe; aqui são três, e o JS já
       rola a faixa para deixar a seção ATUAL à vista
       (views/_assets/js/ui/filtro-lista.js). O degradê acabava desbotando
       justamente o item ativo, que é o que ele traz para a borda.
    */

    .gep-instituto-abas ul {
        flex-direction: row;
        gap: 4px;
        overflow-x: auto;
        /* a barra de rolagem do Windows aparece por cima do texto e come altura */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .gep-instituto-abas ul::-webkit-scrollbar {
        display: none;
    }

    #instituto-secoes {
        margin-top: 28px;
        /* abaixo do cabeçalho (118px) E da faixa (48px) */
        scroll-margin-top: 166px;
    }

    .gep-instituto-abas li {
        flex: 0 0 auto;
    }

    /* o acento passa da esquerda para baixo, que é a borda livre na faixa */
    .gep-instituto-aba {
        padding: 14px 14px 12px;
        border-left: 0;
        border-bottom: 2px solid transparent;
        white-space: nowrap;
    }

    .gep-instituto-aba:hover,
    .gep-instituto-aba:focus {
        border-bottom-color: var(--gep-azul);
    }

    .gep-instituto-aba--ativa {
        border-bottom-color: var(--gep-ciano);
        background-color: transparent;
    }

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

}

@media (max-width: 767.98px) {

    /*
       No celular o cabeçalho continua fixo, e mais alto: a base fica em
       138px (a marca em duas linhas com a faixa do nome do GEP embaixo).
    */
    .gep-instituto-abas {
        top: 138px;
    }

    #instituto-secoes {
        scroll-margin-top: 186px;
    }

    body:not(.layout-admin) .gep-instituto-corpo {
        padding: 24px 0 56px;
    }

    .gep-instituto-aviso {
        padding: 18px 20px;
    }

    .gep-instituto-videos-grade {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .gep-instituto-subjetivos {
        padding: 22px 20px;
    }

    /*
       O número sobe para cima do título: em 320px, 52px de coluna mais o
       vão deixavam o texto com menos de 200px e "Passagem a Membro
       Associado" quebrava em quatro linhas.
    */
    .gep-instituto-etapas > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .gep-instituto-etapa-numero {
        width: 42px;
        height: 42px;
        font-size: 17px;
    }

    .gep-instituto-etapa-corpo h3 {
        margin-top: 0;
    }

    .gep-edital-topo h2 {
        font-size: 25px;
    }

    /* a data vira rótulo acima da etapa */
    .gep-edital-calendario > li {
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
    }

    .gep-edital-taxas {
        grid-template-columns: minmax(0, 1fr);
    }

    /* rótulo acima do valor: em 320px, 96px de coluna deixavam o titular
       do Pix quebrando em cinco linhas */
    .gep-edital-pix dl {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }

    .gep-edital-pix dd + dt {
        margin-top: 10px;
    }

}


/* ------------------------------------------------------------------
   12. Página não encontrada
   Markup em views/erro/nao-encontrado-view.php.

   A tela antiga (includes/404.php) não tinha estilo nenhum: carregava
   quatro CSS que não existem no projeto e saía como texto preto sobre
   branco, fora do site.
------------------------------------------------------------------ */

body:not(.layout-admin) section.gep-erro {
    padding: 56px 0 88px;
}

.gep-erro-texto {
    max-width: 620px;
    margin: 0 0 28px;
    font-size: 17px;
    line-height: 1.8;
    color: var(--gep-texto-suave);
}

.gep-erro-botao {
    display: inline-flex;
    align-items: center;
    margin-bottom: 44px;
    padding: 13px 28px;
    border-radius: 100px;
    background-color: var(--gep-navy);
    font-size: 15px;
    font-weight: 500;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease;
}

.gep-erro-botao:hover,
.gep-erro-botao:focus {
    background-color: var(--gep-azul);
    color: #fff;
    text-decoration: none;
}

/*
   Os atalhos em cartão, e não numa lista de links: quem chega aqui não
   sabe o que procura pelo nome — precisa reconhecer o destino, e a linha
   de descrição é o que permite isso.
*/
.gep-erro-atalhos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 820px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gep-erro-atalhos a {
    display: block;
    height: 100%;
    padding: 18px 22px;
    border: 1px solid var(--gep-borda);
    border-left: 3px solid var(--gep-ciano);
    border-radius: 10px;
    background-color: #fff;
    text-decoration: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s var(--gep-easing);
}

.gep-erro-atalhos a:hover,
.gep-erro-atalhos a:focus {
    box-shadow: 0 12px 28px rgba(1, 51, 73, .13);
    text-decoration: none;
    transform: translateY(-2px);
}

.gep-erro-atalho-nome {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--gep-texto);
}

.gep-erro-atalho-linha {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--gep-rotulo);
}

@media (max-width: 575.98px) {

    body:not(.layout-admin) section.gep-erro {
        padding: 36px 0 64px;
    }

    .gep-erro-atalhos {
        grid-template-columns: minmax(0, 1fr);
    }

}


/* ------------------------------------------------------------------
   13. Menu no celular
   Markup em views/_includes/menu.php (#navbarMainNav).

   Vale só abaixo de 992px, onde o template abre o menu como painel. No
   desktop nada aqui se aplica e a barra horizontal segue como está.

   O que o template entregava e por que precisou mudar:

     - os nomes dos grupos ("Quem Somos", "Cursos/Eventos") saíam em
       #ced4da sobre branco: 1,6:1 de contraste, contra os 4,5:1 que a
       WCAG pede. Eram justamente os rótulos que organizam o menu, e
       estavam praticamente invisíveis;
     - o item da página atual virava um retângulo azul sólido de ponta a
       ponta, no azul genérico do template (#377dff), que não é cor da
       marca e pesava mais que o próprio logo;
     - os links tinham 8px de padding vertical — cerca de 34px de alvo de
       toque, abaixo dos 44px recomendados, com itens colados uns nos
       outros.
------------------------------------------------------------------ */

@media (max-width: 991.98px) {

    #navbarMainNav {
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    #navbarMainNav .navbar-nav {
        padding: 8px 0 0;
    }

    /* ---------- grupo ---------- */

    /*
       O nome do grupo não é um link de destino — é um rótulo. Tratado como
       rótulo: caixa alta pequena, espaçado, na cor de rótulo do tema, com
       um risco ciano à esquerda para dar a âncora visual que o cinza claro
       tentava dar e não conseguia.

       !important porque `.navbar-light .navbar-nav .nav-link` do template
       tem especificidade (0,3,1) e só perde para ele.
    */
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle {
        display: flex;
        align-items: center;
        margin: 14px 0 4px;
        padding: 0 0 0 12px !important;
        border-left: 3px solid rgba(0, 192, 202, .55);
        font-size: 11px !important;
        font-weight: 700;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--gep-rotulo) !important;
    }

    /* a seta de dropdown não serve num painel já expandido */
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle:after {
        display: none !important;
    }

    /*
       O rótulo nunca ganha fundo.

       O template pinta `.nav-link.active` e `.nav-link.show` com a barra
       azul cheia — e como o rótulo é cinza claro, o texto sumia dentro
       dela. O `.active` aparece sempre que a página atual está DENTRO do
       grupo (menu.php marca o pai junto com o filho), então bastava abrir
       qualquer página interna para a faixa azul surgir.

       Quem indica a página atual é o filho, logo abaixo, com a barra ciano
       e o fundo suave. Repetir a marcação no pai é dizer duas vezes a mesma
       coisa, e a forma mais pesada ainda por cima.
    */
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle.active,
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle.show,
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle:hover,
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle:focus,
    #navbarMainNav .navbar-nav > .nav-item.show > .nav-link.dropdown-toggle,
    #navbarMainNav .navbar-nav > .nav-item.active > .nav-link.dropdown-toggle {
        background-color: transparent !important;
        color: var(--gep-rotulo) !important;
    }

    /*
       A única marca no grupo que contém a página atual é o risco à esquerda
       ficar cheio, em vez do ciano claro. Discreto de propósito: ajuda a
       localizar o trecho da lista sem competir com o item marcado.
    */
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle.active {
        border-left-color: var(--gep-navy);
    }

    /*
       E o rótulo deixa de ser alvo de toque. `cursor: default` sozinho não
       basta: o toque continuaria acionando o dropdown e rolando a página
       para o topo nos itens cujo href é "#".

       Quem tem destino próprio não perde nada — "Formação Psicanalítica"
       aponta para o Instituto, que é o primeiro filho logo abaixo.
    */
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.dropdown-toggle {
        pointer-events: none;
        cursor: default;
    }

    /* ---------- item de primeiro nível sem filhos (Home, Textos, Contato) ---------- */

    #navbarMainNav .navbar-nav > .nav-item > .nav-link:not(.dropdown-toggle) {
        display: flex;
        align-items: center;
        min-height: 42px;
        margin: 1px 0;
        padding: 8px 14px !important;
        border-radius: 8px;
        font-size: 15px !important;
        color: var(--gep-texto) !important;
    }

    /* ---------- filhos ---------- */

    #navbarMainNav .dropdown-menu {
        margin: 0;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
    }

    #navbarMainNav .dropdown-item {
        padding: 0 !important;
        background: transparent !important;
    }

    /*
       42px de altura mínima. Abaixo disso o toque começa a errar de item;
       acima, os 14 links do menu não cabem numa tela de celular e a lista
       vira rolagem. 42 com os links encostados é o ponto em que os dois
       cabem — o respiro que separa assuntos vem da margem do rótulo do
       grupo, não de afastar item de item.
    */
    #navbarMainNav .dropdown-item > .dropdown-link {
        display: flex;
        align-items: center;
        min-height: 42px;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 15px;
        color: var(--gep-texto);
        text-decoration: none;
        transition: background-color .15s ease, color .15s ease;
    }

    #navbarMainNav .dropdown-item > .dropdown-link:hover,
    #navbarMainNav .dropdown-item > .dropdown-link:focus {
        background-color: #f2f6f9;
        color: var(--gep-azul);
        text-decoration: none;
    }

    /* ---------- página atual ---------- */

    /*
       Fundo suave e uma barra ciano à esquerda, no lugar do retângulo azul
       de ponta a ponta: diz onde a pessoa está sem competir com o logo nem
       trazer a cor genérica do template para dentro da marca.
    */
    #navbarMainNav .navbar-nav > .nav-item > .nav-link.active:not(.dropdown-toggle),
    #navbarMainNav .dropdown-item.active > .dropdown-link {
        /*
           `border-left` em vez de um ::before posicionado: o item tem
           border-radius, e a barra absoluta ficava escondida atrás do canto
           arredondado. A borda acompanha o raio sozinha.
        */
        border-left: 3px solid var(--gep-ciano);
        padding-left: 11px;
        background-color: rgba(0, 192, 202, .12) !important;
        font-weight: 600;
        color: var(--gep-navy) !important;
    }

    /* ---------- divisor ---------- */

    /*
       O template desenha o divisor como linha cheia entre itens, o que
       repetia a separação que o espaço entre grupos já dá.
    */
    #navbarMainNav .dropdown-divider {
        display: none;
    }

    /* ---------- topo do painel ---------- */

    .navbar-xs {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 0 14px;
        border-bottom: 1px solid var(--gep-borda);
    }

    /*
       O arquivo do logo tem 1420x611 (proporção 2,32) e o template força
       `width: 100px; height: 60px` (proporção 1,67) no .navbar-brand img:
       a marca saía espremida na horizontal em todo menu de celular.

       `height: auto` com !important porque é a declaração do template que
       está sendo desfeita, e ela vem de um seletor mais específico.
    */
    .navbar-xs .navbar-brand img {
        width: 116px !important;
        height: auto !important;
    }

    /*
       O X vinha com o traço em tamanho de título, maior que o logo ao lado.
       O ícone encolhe para 15px; a ÁREA continua com 44px, que é o alvo de
       toque mínimo — o que diminui é o desenho, não o que se pode acertar.
    */
    .navbar-xs .navbar-toggler {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin-right: -10px;
        padding: 0 !important;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--gep-texto);
    }

    .navbar-xs .navbar-toggler:hover {
        background-color: #f1f4f8;
    }

    .navbar-xs .navbar-toggler svg {
        width: 15px;
        height: 15px;
        fill: currentColor;
    }

    /* ---------- redes sociais, no pé do menu ---------- */

    .gep-menu-social {
        margin-top: 28px;
        padding-top: 22px;
        border-top: 1px solid var(--gep-borda);
        text-align: center;
    }

    .gep-menu-social h3 {
        margin: 0 0 12px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--gep-rotulo);
    }

    /*
       Contorno e cor da marca, no lugar do azul do Facebook e do degradê do
       Instagram que as classes do template aplicavam: dois blocos coloridos
       no fim de um painel branco puxavam mais atenção que o menu inteiro.
    */
    .gep-menu-social a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        margin: 0 4px;
        border: 1px solid var(--gep-borda);
        border-radius: 50%;
        font-size: 16px;
        color: var(--gep-texto-suave);
        text-decoration: none;
        transition: border-color .2s ease, background-color .2s ease, color .2s ease;
    }

    .gep-menu-social a:hover,
    .gep-menu-social a:focus {
        border-color: var(--gep-navy);
        background-color: var(--gep-navy);
        color: #fff;
        text-decoration: none;
    }
}

/* ------------------------------------------------------------------
   14. Rodapé
   Estrutura em colunas (marca + navegação + contato).
   Sobrescreve o .footer-dark do template.
------------------------------------------------------------------ */

#footer.footer-gep {
    position: relative;
    color: #fff;
    background: var(--gep-navy-escuro);
    background: linear-gradient(180deg, var(--gep-navy-escuro) 0, var(--gep-navy-profundo) 100%);
}

/*
   Faixa de acento no topo: separa o rodapé da seção anterior mesmo
   quando ela usa o mesmo navy da marca (ex.: views/quem_somos/membros-view.php).
*/
#footer.footer-gep:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: var(--gep-acento);
}

#footer.footer-gep .container {
    background: transparent !important;
}

#footer.footer-gep a {
    color: rgba(255, 255, 255, .62);
    text-decoration: none;
    transition: color .2s ease;
}

#footer.footer-gep a:hover,
#footer.footer-gep a:focus {
    color: var(--gep-ciano);
    text-decoration: none;
}

/* ---------- topo: marca + colunas ---------- */

.footer-gep-top {
    padding-top: 64px;
    padding-bottom: 48px;
}

.footer-gep-logo {
    display: inline-block;
    margin-bottom: 24px;
}

.footer-gep-logo img {
    width: 190px;
    height: auto;
}

.footer-gep-sobre {
    max-width: 330px;
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .72);
}

.footer-gep-legal {
    max-width: 330px;
    margin-bottom: 24px;
    font-size: 13px;
    line-height: 1.8;
    color: rgba(255, 255, 255, .42);
}

/* título de coluna */
.footer-gep-titulo {
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .02em;
    color: #fff;
}

/* lista de links */
.footer-gep-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-gep-links li + li {
    margin-top: 12px;
}

.footer-gep-links a {
    font-size: 14px;
    line-height: 1.5;
}

/* ---------- redes sociais ---------- */

.footer-gep-social {
    display: flex;
    gap: 10px;
}

.footer-gep-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(53, 113, 156, .5);
    border-radius: 8px;
    background-color: rgba(53, 113, 156, .18);
    font-size: 15px;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.footer-gep-social a:hover {
    border-color: var(--gep-azul);
    background-color: var(--gep-azul);
    color: #fff;
}

/* ---------- barra inferior ---------- */

.footer-gep-bottom {
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid rgba(53, 113, 156, .35);
    font-size: 13px;
    color: rgba(255, 255, 255, .42);
}

.footer-gep-bottom a {
    color: rgba(255, 255, 255, .62);
}

.footer-gep-creditos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
}

/*
   O crédito do desenvolvedor virou link. Sublinhado discreto para que se leia
   como link sem puxar atenção do resto do rodapé — e o ciano no hover, que é
   como os demais links da marca respondem.

   O seletor começa em `#footer.footer-gep` porque é de lá que vem o
   `text-decoration: none` aplicado a todo link do rodapé (logo acima, na
   abertura desta seção): sem o id, a regra não alcança.
*/
#footer.footer-gep .footer-gep-creditos a {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: rgba(255, 255, 255, .28);
    transition: color .2s ease, text-decoration-color .2s ease;
}

#footer.footer-gep .footer-gep-creditos a:hover,
#footer.footer-gep .footer-gep-creditos a:focus {
    color: var(--gep-ciano);
    text-decoration: underline;
    text-decoration-color: var(--gep-ciano);
}

.footer-gep-legais {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-gep-legais button {
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    cursor: pointer;
    transition: color .2s ease;
}

.footer-gep-legais button:hover {
    color: var(--gep-ciano);
}

.footer-gep-cards {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-gep-cards img {
    width: 38px;
    height: 24px;
    opacity: .75;
}

/* ---------- responsivo ---------- */

@media (max-width: 991.98px) {
    .footer-gep-top {
        padding-top: 48px;
        padding-bottom: 32px;
    }

    .footer-gep-coluna {
        margin-bottom: 32px;
    }
}

@media (max-width: 575.98px) {
    .footer-gep-sobre,
    .footer-gep-legal {
        max-width: 100%;
    }

    .footer-gep-creditos,
    .footer-gep-legais {
        justify-content: center;
        text-align: center;
    }

    .footer-gep-cards {
        justify-content: center;
    }
}


/* ------------------------------------------------------------------
   15. Movimento reduzido
   Respeita quem configurou menos animação no sistema operacional.
------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .gep-hero-glow,
    .gep-hero-arte circle,
    .gep-hero-arte line,
    .gep-hero-eyebrow,
    .gep-hero-titulo,
    .gep-hero-sub,
    .gep-hero-risco {
        animation: none;
    }

    .gep-hero-risco {
        width: 96px;
    }

    .gep-pessoa:before,
    .gep-pessoa-conteudo,
    .gep-pessoa-cargo {
        transition: none;
    }

    .gep-produto-link,
    .gep-produto-capa img,
    .gep-produto-cta i {
        transition: none;
    }

    .gep-produto-link:hover {
        transform: none;
    }

    .gep-produto-link:hover .gep-produto-capa img {
        transform: none;
    }

    .gep-estudo,
    .gep-estudo-acao .btn {
        transition: none;
    }

    .gep-blog-destaque-capa img,
    .gep-blog-destaque-titulo,
    .gep-blog-destaque-cta i,
    .gep-blog-item-capa img,
    .gep-blog-item-titulo,
    .gep-blog-relacionado-capa img,
    .gep-blog-relacionado-titulo,
    .gep-artigo-rede {
        transition: none;
    }

    .gep-blog-destaque-link:hover .gep-blog-destaque-capa img,
    .gep-blog-destaque-link:hover .gep-blog-destaque-cta i,
    .gep-blog-item-link:hover .gep-blog-item-capa img,
    .gep-blog-relacionado:hover .gep-blog-relacionado-capa img,
    .gep-artigo-rede:hover {
        transform: none;
    }
}