/* ====================================================================================
   Revista Digital — grelha de edicoes + leitor folheavel (CMC)
   ==================================================================================== */

/* --- Pesquisa e filtros (Ano, Mes, Departamento) --- */
.cmc-filtros { margin: 44px 0 34px; }
/* quando ha titulo de seccao por cima (pagina /revistas/), o respiro vem do subtitulo */
.cmc-sec-sub + .cmc-filtros { margin-top: 0; }
.cmc-filtros-busca { position: relative; display: flex; align-items: center; background: #fff; border: 1px solid #dcdfe6; border-radius: 30px; padding: 0 10px 0 6px; box-shadow: 0 2px 12px rgba(30,38,55,.06); transition: border-color .2s ease, box-shadow .2s ease; }
/* Sugestoes de palavras enquanto digita */
.cmc-sugestoes { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #dcdfe6; border-radius: 14px; box-shadow: 0 12px 32px rgba(30,38,55,.14); padding: 6px; z-index: 60; max-height: 320px; overflow-y: auto; }
.cmc-sugestao { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: none; text-align: left; padding: 9px 14px; border-radius: 9px; font-size: 15px; color: #1e2637; cursor: pointer; }
.cmc-sugestao:hover, .cmc-sugestao.ativa { background: #f6f7f9; }
.cmc-sugestao small { color: #9aa0ab; font-size: 12px; white-space: nowrap; }
.cmc-filtros-busca:focus-within { border-color: #2f9544; box-shadow: 0 0 0 3px rgba(47,149,68,.12); }
.cmc-filtros-busca > button { border: 0; background: none; color: #7c8494; width: 42px; height: 48px; font-size: 16px; cursor: pointer; flex-shrink: 0; }
.cmc-filtros-busca > button:hover { color: #2f9544; }
.cmc-filtros-busca input { flex: 1; min-width: 0; border: 0; background: none; height: 48px; padding: 0; font-size: 16px; color: #1e2637; outline: none; box-shadow: none; }
/* o tema poe borda/outline no proprio input em foco — o destaque e so da pilula (:focus-within) */
.cmc-filtros-busca input:focus, .cmc-filtros-busca input:hover, .cmc-filtros-busca input:active { border: 0 !important; outline: none !important; box-shadow: none !important; background: none !important; }
.cmc-filtros-busca input::placeholder { color: #9aa0ab; }
.cmc-filtros-busca input::-webkit-search-cancel-button { -webkit-appearance: none; }
.cmc-filtros-painel { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 32px; margin-top: 16px; padding: 18px 22px; background: #f6f7f9; border-radius: 12px; }
.cmc-filtro-grupo { display: flex; flex-direction: column; gap: 8px; }
.cmc-filtro-grupo label, .cmc-filtro-rotulo { margin: 0; color: #7c8494; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; line-height: 1; }
.cmc-filtro-grupo select { border: 1px solid #dcdfe6; border-radius: 30px; padding: 8px 14px; font-size: 14px; color: #1e2637; background: #fff; min-width: 130px; cursor: pointer; transition: border-color .2s ease; }
.cmc-filtro-grupo select:hover, .cmc-filtro-grupo select:focus { border-color: #1e2637; outline: none; }
.cmc-filtro-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cmc-chip { border: 1px solid #dcdfe6; background: #fff; color: #1e2637; border-radius: 30px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; }
.cmc-chip:hover { border-color: #1e2637; background: #1e2637; color: #fff; }
.cmc-chip.ativo { background: #f4b41a; border-color: #f4b41a; color: #1e2637; }

/* --- Grelha de edicoes --- */
.cmc-rev-grid { margin-top: 6px; }
.cmc-rev-col { margin-bottom: 30px; }
.cmc-rev-card { position: relative; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(30,38,55,.10); transition: transform .25s ease, box-shadow .25s ease; height: 100%; display: flex; flex-direction: column; }
.cmc-rev-card:hover { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(30,38,55,.18); }
.cmc-rev-capa { position: relative; display: block; padding-top: 141.4%; background: #e9ebf0; overflow: hidden; }
.cmc-rev-capa img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cmc-rev-card:hover .cmc-rev-capa img { transform: scale(1.03); }
.cmc-rev-capa-vazia { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 64px; color: #c3c8d4; }
.cmc-rev-ler { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(8px); background: #f4b41a; color: #1e2637; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; padding: 9px 22px; border-radius: 30px; opacity: 0; transition: all .3s ease; white-space: nowrap; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.cmc-rev-card:hover .cmc-rev-ler { opacity: 1; transform: translateX(-50%) translateY(0); }
.cmc-rev-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cmc-rev-ano { align-self: flex-start; display: inline-block; background: #1e2637; color: #f4b41a; font-size: 11px; font-weight: 700; letter-spacing: 1px; padding: 3px 10px; border-radius: 3px; }
a.cmc-rev-ano:hover { background: #f4b41a; color: #1e2637; text-decoration: none; }
.cmc-rev-titulo { font-size: 17px; line-height: 1.35; margin: 2px 0 0; color: #1e2637; }
.cmc-rev-titulo a { color: inherit; }
.cmc-rev-titulo a:hover { color: #2f9544; text-decoration: none; }
.cmc-rev-meta { margin-top: auto; padding-top: 10px; display: flex; align-items: center; justify-content: space-between; color: #6e6e6e; font-size: 13px; border-top: 1px solid #eef0f4; }
.cmc-rev-meta .fa { margin-right: 5px; color: #2f9544; }
.cmc-rev-pdf-link { color: #6e6e6e; }
.cmc-rev-pdf-link:hover { color: #2f9544; text-decoration: none; }
.cmc-rev-vazio { text-align: center; color: #6e6e6e; padding: 30px 0; }

/* --- Leitor folheavel --- */
/* mesma folga do topo das materias — esta barra tambem abre a pagina */
.cmc-flip-topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-top: 44px; margin-bottom: 22px; }
.cmc-flip-voltar { color: #2f9544; font-weight: 600; }
.cmc-flip-voltar:hover { color: #1e2637; text-decoration: none; }
.cmc-flip-voltar .fa { margin-right: 4px; }
.cmc-flip-wrap { background: #1e2637; border-radius: 10px; padding: 26px 18px 0; }
.cmc-flip-stage { position: relative; max-width: 1040px; margin: 0 auto; min-height: 340px; }
.cmc-flip-stage .stf__parent { margin: 0 auto; }
.cmc-flip-stage .cmc-flip-caixa { position: relative; margin: 0 auto; max-width: 100%; transition: transform .5s ease; }
/* Convite para a galeria de fotos quando a ultima pagina fica visivel
   (banner flutuante por cima da revista, ancorado na base do palco) */
.cmc-flip-convite { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; width: max-content; max-width: 94%; background: #fff; border-radius: 40px; padding: 9px 12px 9px 24px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: cmc-convite-sobe .45s ease-out; }
@keyframes cmc-convite-sobe { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
.cmc-flip-convite .fa { font-size: 19px; color: #2f9544; }
.cmc-flip-convite strong { color: #1e2637; font-size: 14.5px; white-space: nowrap; }
.cmc-flip-convite span { color: #6e6e6e; font-size: 13.5px; }
.cmc-flip-convite a { display: inline-block; background: #f4b41a; color: #1e2637; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 9px 20px; border-radius: 30px; transition: all .25s ease; white-space: nowrap; }
.cmc-flip-convite a:hover, .cmc-flip-convite a:focus { background: #2f9544; color: #fff; text-decoration: none; }
@media (max-width: 767px) { .cmc-flip-convite { padding: 12px 16px; text-align: center; } .cmc-flip-convite span { display: none; } }

/* Destaque do termo buscado: marca-texto discreto sobre a pagina assente */
.cmc-flip-marcas { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 5; }
.cmc-flip-marca { position: absolute; background: rgba(244,180,26,.35); border-radius: 3px; animation: cmc-marca-entra .6s ease-out; }
@keyframes cmc-marca-entra { from { opacity: 0; } to { opacity: 1; } }
.cmc-flip-stage canvas { max-width: 100%; }
.cmc-flip-loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 14px; color: #f4b41a; font-size: 14px; letter-spacing: 1px; text-align: center; }
.cmc-flip-loading:before { content: ""; width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(244,180,26,.25); border-top-color: #f4b41a; animation: cmc-gira .8s linear infinite; }
@keyframes cmc-gira { to { transform: rotate(360deg); } }
.cmc-flip-controles { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 18px 0 22px; }
.cmc-flip-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer; transition: background .2s ease, color .2s ease; }
.cmc-flip-btn:hover, .cmc-flip-btn:focus { background: #f4b41a; color: #1e2637; text-decoration: none; outline: none; }
.cmc-flip-pagina { color: #fff; font-size: 14px; min-width: 90px; text-align: center; letter-spacing: 1px; }
.cmc-flip-pdf { background: #f4b41a; color: #1e2637; }
.cmc-flip-pdf:hover, .cmc-flip-pdf:focus { background: #2f9544; color: #fff; }
/* Proxima pagina com o termo buscado (aparece so quando ha mais de uma) */
.cmc-flip-busca { width: auto; border-radius: 30px; padding: 0 16px; gap: 7px; background: #f4b41a; color: #1e2637; font-weight: 700; font-size: 14px; }
.cmc-flip-busca:hover, .cmc-flip-busca:focus { background: #2f9544; color: #fff; }
.cmc-flip-busca-n { font-size: 13px; }

/* Tela cheia */
.cmc-flip-wrap:fullscreen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; padding: 20px 16px 0; }
.cmc-flip-wrap:fullscreen .cmc-flip-stage { flex: 1; width: 100%; max-width: 1400px; display: flex; flex-direction: column; justify-content: center; }
.cmc-flip-wrap:-webkit-full-screen { display: flex; flex-direction: column; justify-content: center; border-radius: 0; padding: 20px 16px 0; }
/* Tela cheia simulada (iPhone) */
.cmc-flip-wrap.cmc-flip-fake-full { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; border-radius: 0; padding: 16px 10px 0; margin: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.cmc-flip-wrap.cmc-flip-fake-full .cmc-flip-stage { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; justify-content: center; }
/* Falha ao carregar a lib do leitor */
.cmc-flip-erro:before { display: none; }
.cmc-flip-erro { color: #fff; font-size: 14px; letter-spacing: normal; max-width: 420px; line-height: 1.5; }

/* Edicao ainda sem leitor (fallback para o PDF) */
.cmc-flip-fallback { text-align: center; padding: 54px 20px; background: #f6f7f9; border-radius: 10px; }
.cmc-flip-fallback .fa-book { font-size: 56px; color: #c3c8d4; display: block; margin-bottom: 16px; }
.cmc-flip-fallback p { color: #6e6e6e; margin-bottom: 22px; }

/* Descricao e outras edicoes */
.cmc-rev-descricao { margin-top: 32px; }
.cmc-rev-outras { margin-top: 48px; }
.cmc-rev-outras h3 { font-size: 22px; color: #1e2637; padding-left: 14px; border-left: 4px solid #f4b41a; margin-bottom: 26px; }

/* --- Responsivo --- */
@media (max-width: 767px) {
    .cmc-flip-wrap { padding: 14px 8px 0; border-radius: 8px; }
    .cmc-flip-stage { min-height: 260px; }
    .cmc-flip-btn { width: 38px; height: 38px; font-size: 16px; }
    .cmc-flip-pagina { min-width: 70px; font-size: 13px; }
    .cmc-rev-outras { margin-top: 36px; }
    .cmc-filtros { margin: 28px 0 24px; }
    .cmc-filtros-busca button { width: 38px; }
    .cmc-filtros-painel { padding: 14px; gap: 12px 14px; }
    .cmc-filtro-grupo { flex: 1 1 40%; }
    .cmc-filtro-grupo select { width: 100%; min-width: 0; }
    .cmc-filtro-deptos { flex-basis: 100%; }
}

/* --- Titulos de seccao (Edicoes / Materias) --- */
.cmc-sec-titulo { font-size: 24px; color: #1e2637; padding-left: 14px; border-left: 4px solid #f4b41a; margin: 0 0 8px; }
.cmc-sec-titulo-topo { margin-top: 44px; }
@media (max-width: 767px) { .cmc-sec-titulo-topo { margin-top: 28px; } }
.cmc-sec-sub { color: #6e6e6e; margin: 0 0 26px; padding-left: 18px; }

/* Grupos de edicoes por ano (mesmo componente de titulo, decrescente) */
.cmc-rev-ano-grupo + .cmc-rev-ano-grupo { margin-top: 14px; }
.cmc-ano-titulo { font-size: 21px; color: #1e2637; padding-left: 14px; border-left: 4px solid #f4b41a; margin: 0 0 20px; }

/* --- Leitor em overlay (abre por cima da grelha) --- */
.cmc-leitor-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 999999; background: rgba(20, 26, 40, .97); display: none; flex-direction: column; opacity: 0; transition: opacity .22s ease; }
.cmc-leitor-overlay.aberto { display: flex; }
.cmc-leitor-overlay.visivel { opacity: 1; }
.cmc-leitor-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; }
.cmc-leitor-titulo { color: #fff; font-size: 16px; font-weight: 600; line-height: 1.3; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmc-leitor-acoes { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.cmc-leitor-overlay .cmc-flip-stage { flex: 1; min-height: 0; max-width: none; margin: 0; display: flex; align-items: center; justify-content: center; padding: 0 14px; }
.cmc-leitor-overlay .cmc-flip-livro { width: 100%; max-width: 1100px; max-width: min(1100px, calc((100vh - 190px) * 1.414)); }
.cmc-leitor-overlay .cmc-flip-controles { padding: 14px 0 18px; }

/* --- Materias (memorial por departamento e mes) --- */
/* scroll-margin-top: o cabecalho do tema fica fixo (110px) quando a pagina esta
   rolada — sem esta folga a ancora #materias (paginacao e redirect de /materia/)
   deixava o titulo da seccao escondido debaixo dele */
.cmc-mat-sec { margin-top: 56px; padding-top: 34px; border-top: 1px solid #eef0f4; scroll-margin-top: 124px; }
.cmc-mat-col { margin-bottom: 30px; }
.cmc-mat-card { background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(30,38,55,.10); transition: transform .25s ease, box-shadow .25s ease; height: 100%; display: flex; flex-direction: column; }
.cmc-mat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(30,38,55,.16); }
.cmc-mat-foto { position: relative; display: block; padding-top: 62.5%; background: #e9ebf0; overflow: hidden; }
.cmc-mat-foto img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.cmc-mat-card:hover .cmc-mat-foto img { transform: scale(1.04); }
.cmc-mat-foto-vazia { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 44px; color: #c3c8d4; }
.cmc-mat-info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.cmc-mat-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #6e6e6e; }
.cmc-depto { display: inline-block; background: #1e2637; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .8px; padding: 3px 10px; border-radius: 3px; text-transform: uppercase; }
.cmc-depto-social { background: #f4b41a; color: #1e2637; }
.cmc-depto-cultural { background: #2f9544; color: #fff; }
.cmc-depto-esportes { background: #1e2637; color: #f4b41a; }
.cmc-depto-administrativa { background: #6e6e6e; color: #fff; }
.cmc-depto-presidencia { background: #8a2b2b; color: #fff; }
.cmc-mat-titulo { font-size: 17px; line-height: 1.35; margin: 0; color: #1e2637; }
.cmc-mat-titulo a { color: inherit; }
.cmc-mat-titulo a:hover { color: #2f9544; text-decoration: none; }
.cmc-mat-resumo { color: #6e6e6e; font-size: 14px; line-height: 1.55; margin: 0; }
.cmc-mat-ler { margin-top: auto; padding-top: 8px; color: #2f9544; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.cmc-mat-ler:hover { color: #1e2637; text-decoration: none; }
/* contagem das materias (so aparece quando ha mais de uma pagina) */
.cmc-mat-cont { margin: 0 0 20px; }

/* Bloco que a busca/filtros/paginacao trocam sem recarregar a pagina.
   min-height evita que o rodape salte enquanto a resposta nao chega. */
.cmc-listas { position: relative; min-height: 220px; transition: opacity .18s ease; }
.cmc-listas.cmc-carregando { opacity: .45; pointer-events: none; cursor: progress; }

/* Paginacao das materias — mesma familia dos chips dos filtros.
   Nao reaproveita .ttm-pagination do tema (aquele estilo vive noutra escala e
   depende de markup do tema); as regras aqui sao todas proprias. */
.cmc-paginacao { margin-top: 12px; }
.cmc-paginacao ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.cmc-paginacao li { margin: 0; padding: 0; list-style: none; }
.cmc-paginacao li:before { content: none; }
.cmc-paginacao .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 13px; border: 1px solid #dcdfe6; border-radius: 30px; background: #fff; color: #1e2637; font-size: 14px; font-weight: 600; line-height: 1; transition: all .2s ease; }
.cmc-paginacao a.page-numbers:hover, .cmc-paginacao a.page-numbers:focus { border-color: #1e2637; background: #1e2637; color: #fff; text-decoration: none; }
.cmc-paginacao .page-numbers.current { background: #f4b41a; border-color: #f4b41a; color: #1e2637; }
.cmc-paginacao .page-numbers.dots { min-width: 26px; padding: 0 2px; border-color: transparent; background: none; color: #9aa0ab; }
@media (max-width: 767px) {
    .cmc-paginacao ul { gap: 6px; }
    .cmc-paginacao .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; font-size: 13px; }
}
/* margin-top: e a primeira coisa da pagina, logo abaixo da testeira — sem ela a
   barra fica colada no cabecalho. 44px e a mesma folga que a grade de revistas e
   a galeria ja usam (.cmc-sec-titulo-topo), para as paginas ficarem iguais. */
.cmc-mat-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 44px; margin-bottom: 22px; }
/* no telemovel a folga encolhe, como ja acontece com .cmc-sec-titulo-topo.
   Tem de vir DEPOIS das duas regras acima, senao os 44px ganhavam na cascata. */
@media (max-width: 767px) { .cmc-mat-cab, .cmc-flip-topo { margin-top: 28px; } }
.cmc-mat-cab-meta { display: flex; align-items: center; gap: 10px; color: #6e6e6e; font-size: 13px; }
.cmc-mat-hero { border-radius: 8px; overflow: hidden; margin-bottom: 26px; }
.cmc-mat-hero img { width: 100%; height: auto; display: block; }
.cmc-mat-conteudo { font-size: 16px; line-height: 1.7; }
.cmc-mat-conteudo iframe { max-width: 100%; }
/* "Mais fotos": convite para a galeria completa do evento, no fim da materia */
.cmc-mat-fotos { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 30px; padding: 20px 24px; background: #f6f7f9; border-radius: 12px; border-left: 4px solid #f4b41a; }
.cmc-mat-fotos-txt { display: flex; align-items: center; gap: 14px; }
.cmc-mat-fotos-txt .fa { font-size: 26px; color: #2f9544; }
.cmc-mat-fotos-txt strong { display: block; color: #1e2637; font-size: 16px; }
.cmc-mat-fotos-txt span { color: #6e6e6e; font-size: 13.5px; }
@media (max-width: 767px) { .cmc-mat-fotos { flex-direction: column; align-items: stretch; text-align: center; } .cmc-mat-fotos-txt { flex-direction: column; gap: 6px; } .cmc-mat-fotos .ttm-btn { text-align: center; } }
.cmc-mat-partilha { display: flex; align-items: center; gap: 8px; margin-top: 28px; padding-top: 18px; border-top: 1px solid #eef0f4; color: #6e6e6e; font-size: 13px; }
.cmc-mat-partilha .cmc-flip-btn { background: #1e2637; width: 38px; height: 38px; font-size: 15px; }
.cmc-mat-partilha .cmc-flip-btn:hover { background: #f4b41a; color: #1e2637; }

/* Resumo da selecao ativa */
.cmc-resumo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; color: #6e6e6e; font-size: 14px; }
.cmc-resumo b { color: #1e2637; }
.cmc-resumo a { color: #2f9544; font-weight: 600; white-space: nowrap; }
.cmc-resumo a:hover { color: #1e2637; text-decoration: none; }
.cmc-resumo a .fa { margin-right: 4px; }

@media (max-width: 767px) {
    .cmc-leitor-overlay .cmc-flip-livro { max-width: 92vw; max-width: min(92vw, calc((100vh - 170px) * 0.707)); }
    .cmc-leitor-titulo { font-size: 14px; }
    .cmc-mat-sec { margin-top: 40px; padding-top: 26px; }
}

/* ====================================================================================
   Galeria de Fotos — grelha com busca/filtros (mesma familia visual da revista)
   ==================================================================================== */
.cmc-gal-card { display: flex; flex-direction: column; height: calc(100% - 30px); margin-bottom: 30px; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 18px rgba(30,38,55,.10); transition: transform .25s ease, box-shadow .25s ease; text-decoration: none; }
.cmc-gal-card:hover, .cmc-gal-card:focus { transform: translateY(-5px); box-shadow: 0 12px 28px rgba(30,38,55,.18); text-decoration: none; }
.cmc-gal-capa { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: #eef0f4; }
.cmc-gal-capa img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.cmc-gal-card:hover .cmc-gal-capa img { transform: scale(1.04); }
.cmc-gal-sem-capa { display: flex; align-items: center; justify-content: center; height: 100%; color: #b9bfca; font-size: 40px; }
.cmc-gal-ver { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(8px); background: #f4b41a; color: #1e2637; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; padding: 8px 18px; border-radius: 30px; white-space: nowrap; opacity: 0; transition: all .25s ease; }
.cmc-gal-ver .fa { margin-right: 5px; }
.cmc-gal-card:hover .cmc-gal-ver, .cmc-gal-card:focus .cmc-gal-ver { opacity: 1; transform: translateX(-50%) translateY(0); }
.cmc-gal-qtd { position: absolute; top: 10px; right: 10px; background: rgba(30,38,55,.78); color: #fff; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 30px; }
.cmc-gal-info { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.cmc-gal-titulo { color: #1e2637; font-size: 16px; font-weight: 700; line-height: 1.35; }
.cmc-gal-card:hover .cmc-gal-titulo { color: #2f9544; }
.cmc-gal-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; color: #6e6e6e; font-size: 13px; }
.cmc-gal-meta .fa { color: #f4b41a; margin-right: 4px; }
.cmc-gal-depto { background: #f2f6f3; color: #2f9544; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: 30px; }

/* --- Tela "antes e depois" da galeria (validacao) --- */
.cmc-comparar-intro { max-width: 860px; margin: 34px auto 30px; text-align: center; color: #5a6170; font-size: 15.5px; line-height: 1.65; }
.cmc-comparar-caixa { border: 1px solid #dcdfe6; border-radius: 12px; overflow: hidden; background: #fff; margin-bottom: 30px; box-shadow: 0 4px 18px rgba(30,38,55,.08); }
.cmc-comparar-nova { border-color: #f4b41a; }
.cmc-comparar-topo { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #eceef2; flex-wrap: wrap; }
.cmc-comparar-tag { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; padding: 5px 14px; border-radius: 30px; }
.cmc-comparar-antes { background: #eef0f4; color: #5a6170; }
.cmc-comparar-depois { background: #f4b41a; color: #1e2637; }
.cmc-comparar-desc { color: #6e6e6e; font-size: 13.5px; }
.cmc-comparar-previa { position: relative; height: 560px; overflow: hidden; background: #f7f8fa; }
.cmc-comparar-previa iframe { width: 200%; height: 1120px; border: 0; transform: scale(.5); transform-origin: 0 0; }
.cmc-comparar-rodape { padding: 14px 18px; border-top: 1px solid #eceef2; text-align: center; }
@media (max-width: 991px) { .cmc-comparar-previa { height: 420px; } .cmc-comparar-previa iframe { height: 840px; } }

/* ====================================================================================
   Videos presos as paginas da edicao (play na pagina + player sobre a revista)
   ==================================================================================== */
.cmc-flip-videos { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.cmc-flip-video { position: absolute; pointer-events: auto; background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cmc-flip-video-play { width: 54px; height: 54px; border-radius: 50%; background: #f4b41a; color: #1e2637; display: flex; align-items: center; justify-content: center; font-size: 18px; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); animation: cmc-video-pulso 2.2s ease-in-out infinite; transition: transform .2s ease; }
.cmc-flip-video-play .fa { margin-left: 3px; }
.cmc-flip-video:hover .cmc-flip-video-play, .cmc-flip-video:focus .cmc-flip-video-play { transform: scale(1.12); }
@keyframes cmc-video-pulso {
    0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 0 rgba(244, 180, 26, .55); }
    50% { box-shadow: 0 6px 18px rgba(0, 0, 0, .35), 0 0 0 14px rgba(244, 180, 26, 0); }
}
.cmc-video-player { position: absolute; inset: 0; z-index: 12; background: rgba(13, 17, 27, .9); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .22s ease; }
.cmc-video-player.aberto { opacity: 1; }
.cmc-video-caixa { position: relative; width: min(860px, 100%); }
.cmc-video-caixa video, .cmc-video-caixa iframe { width: 100%; aspect-ratio: 16 / 9; display: block; background: #000; border: 0; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.cmc-video-fechar { position: absolute; top: -14px; right: -14px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f4b41a; color: #1e2637; cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .2s ease; }
.cmc-video-fechar:hover { background: #fff; }
.cmc-video-titulo { color: #fff; text-align: center; font-size: 14px; margin-top: 10px; opacity: .9; }
@media (max-width: 767px) {
    .cmc-flip-video-play { width: 42px; height: 42px; font-size: 15px; }
    .cmc-video-player { padding: 10px; }
    .cmc-video-fechar { top: -14px; right: 0; }
}

/* --- Player proprio CMC (YouTube por baixo, interface nossa por cima) --- */
.cmc-vp { position: relative; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, .5); }
.cmc-vp-tela { position: relative; aspect-ratio: 16 / 9; cursor: pointer; }
.cmc-vp-tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.cmc-vp-carregando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #0d111b; }
.cmc-vp-carregando span { width: 40px; height: 40px; border-radius: 50%; border: 3px solid rgba(244, 180, 26, .25); border-top-color: #f4b41a; animation: cmc-vp-girar 1s linear infinite; }
@keyframes cmc-vp-girar { to { transform: rotate(360deg); } }
.cmc-vp-grande { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 74px; height: 74px; border: 0; border-radius: 50%; background: rgba(244, 180, 26, .95); color: #1e2637; font-size: 24px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); transition: transform .2s ease; }
.cmc-vp-grande:hover { transform: translate(-50%, -50%) scale(1.08); }
.cmc-vp-grande .fa { margin-left: 4px; }
.cmc-vp-barra { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 12px; padding: 26px 14px 10px; background: linear-gradient(to top, rgba(10, 13, 22, .92), rgba(10, 13, 22, 0)); transition: opacity .3s ease, transform .3s ease; }
.cmc-vp-barra button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background .2s ease; }
.cmc-vp-barra button:hover { background: #f4b41a; color: #1e2637; }
.cmc-vp-tempo { color: #fff; font-size: 12.5px; white-space: nowrap; font-variant-numeric: tabular-nums; opacity: .9; }
.cmc-vp-prog { flex: 1; height: 5px; cursor: pointer; accent-color: #f4b41a; }
.cmc-vp-quieto .cmc-vp-barra { opacity: 0; transform: translateY(8px); pointer-events: none; }
.cmc-vp-quieto { cursor: none; }
.cmc-video-caixa:fullscreen { width: 100%; display: flex; flex-direction: column; justify-content: center; background: #000; }
.cmc-video-caixa:fullscreen .cmc-vp { border-radius: 0; }
@media (max-width: 767px) {
    .cmc-vp-barra { gap: 8px; padding: 20px 10px 8px; }
    .cmc-vp-tempo { font-size: 11px; }
    .cmc-vp-grande { width: 58px; height: 58px; font-size: 19px; }
}

/* --- Banner do video na pagina (capa + play) e player tocando no lugar --- */
.cmc-flip-video { overflow: hidden; border-radius: 6px; background: #0d111b; box-shadow: 0 3px 12px rgba(0, 0, 0, .28); }
.cmc-flip-video-capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmc-flip-video-veu { position: absolute; inset: 0; background: linear-gradient(to top, rgba(13, 17, 27, .72) 0%, rgba(13, 17, 27, .18) 45%, rgba(13, 17, 27, .25) 100%); }
.cmc-flip-video-rotulo { position: absolute; left: 8px; right: 8px; bottom: 6px; color: #fff; font-size: 11px; font-weight: 600; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmc-flip-video.a-tocar { box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
/* player inline: preenche o proprio quadro */
.cmc-vp-inline { position: absolute; inset: 0; border-radius: 0; box-shadow: none; }
.cmc-vp-inline .cmc-vp-tela { position: absolute; inset: 0; aspect-ratio: auto; }
.cmc-vp-inline video { position: absolute; inset: 0; width: 100%; height: 100%; background: #000; }
.cmc-vp-inline .cmc-vp-barra { gap: 8px; padding: 18px 10px 7px; }
.cmc-vp-inline .cmc-vp-barra button { width: 28px; height: 28px; font-size: 11px; }
.cmc-vp-inline .cmc-vp-tempo { font-size: 10.5px; }
.cmc-vp-inline .cmc-vp-grande { width: 52px; height: 52px; font-size: 17px; }
.cmc-vp-sair { position: absolute; top: 6px; right: 6px; z-index: 3; width: 28px; height: 28px; border: 0; border-radius: 50%; background: rgba(13, 17, 27, .75); color: #fff; font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s ease; }
.cmc-vp-sair:hover { background: #f4b41a; color: #1e2637; }
.cmc-flip-video:fullscreen { border-radius: 0; }
.cmc-flip-video:fullscreen .cmc-vp-inline .cmc-vp-barra { gap: 12px; padding: 26px 14px 10px; }
.cmc-flip-video:fullscreen .cmc-vp-inline .cmc-vp-barra button { width: 34px; height: 34px; font-size: 13px; }
/* a capa e o veu sao posicionados — o play precisa subir na pilha */
.cmc-flip-video .cmc-flip-video-play { position: relative; z-index: 2; }

/* --- Video da materia: em pe (vertical, como no celular) ou deitado, tocando no lugar --- */
.cmc-mat-video { margin: 30px auto 8px; }
.cmc-mat-video-caixa { position: relative; overflow: hidden; margin: 0 auto; border-radius: 12px; background: #0d111b; box-shadow: 0 12px 34px rgba(0, 0, 0, .28); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cmc-mat-video-v .cmc-mat-video-caixa { aspect-ratio: 9 / 16; width: min(100%, 360px); }
.cmc-mat-video-h .cmc-mat-video-caixa { aspect-ratio: 16 / 9; width: 100%; }
.cmc-mat-video-caixa .cmc-flip-video-play { position: relative; z-index: 2; }
.cmc-mat-video-caixa:hover .cmc-flip-video-play, .cmc-mat-video-caixa:focus .cmc-flip-video-play { transform: scale(1.12); }
.cmc-mat-video-caixa .cmc-flip-video-rotulo { left: 12px; right: 12px; bottom: 10px; font-size: 13px; white-space: normal; }
.cmc-mat-video-caixa:fullscreen { border-radius: 0; }
.cmc-mat-video-caixa:fullscreen .cmc-vp-inline .cmc-vp-barra { gap: 12px; padding: 26px 14px 10px; }

/* ====================================================================================
   Videos do Instagram
   ------------------------------------------------------------------------------------
   O Instagram nao tem API de player publica (o YouTube tem), entao o video vem no
   embed oficial deles. O que fica nosso e tudo a volta: o banner com o play pulsando,
   a moldura escura, o X, a tela cheia e o credito. O cabecalho da conta e o rodape de
   curtidas do Instagram sao recortados pela janela — as contas do recorte estao no
   revista.js (IG_TOPO / IG_MOLDURA), medidas no proprio embed deles.
   ==================================================================================== */

/* Banner sem capa: fundo da marca, para o quadro nunca ficar um buraco preto.
   Com capa escolhida no admin, ela entra por cima como em qualquer video. */
.cmc-video-ig { background: linear-gradient(135deg, #405de6 0%, #833ab4 32%, #c13584 58%, #e1306c 78%, #fd1d1d 100%); }
.cmc-flip-video-marca { position: absolute; top: 8px; left: 9px; color: #fff; font-size: 15px; opacity: .92; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); line-height: 1; }
.cmc-mat-video-ig .cmc-mat-video-caixa .cmc-flip-video-marca { top: 12px; left: 13px; font-size: 20px; }

/* Janela de recorte: o embed e maior do que o quadro e fica preso pelo transform */
.cmc-vp-ig .cmc-vp-tela { cursor: default; }
.cmc-vp-ig-janela { position: absolute; inset: 0; overflow: hidden; background: #0d111b; }
/* Seletor com a especificidade acima da regra do player do YouTube
   (.cmc-vp-tela iframe), que senao esticaria esta iframe para 100% — e a largura
   aqui nao e enfeite: e a largura logica de onde saem as contas do recorte no
   revista.js (IG_LARGURA). Por isso 'right/bottom: auto', para anular o inset. */
.cmc-vp-ig .cmc-vp-ig-janela iframe.cmc-vp-ig-quadro {
    position: absolute; left: 0; top: 0; right: auto; bottom: auto;
    width: 400px; height: auto; border: 0; transform-origin: top left;
    background: #0d111b; opacity: 0; transition: opacity .25s ease;
    /* ao contrario do YouTube, aqui os cliques TEM de chegar ao embed: e ele que toca */
    pointer-events: auto;
}
/* so aparece depois de o embed avisar a altura real — antes disso o recorte ainda
   estaria pelo palpite inicial e daria um salto na tela.
   O seletor acompanha o da regra de cima: tem de ser mais especifico que ela. */
.cmc-vp-ig .cmc-vp-ig-pronto .cmc-vp-ig-janela iframe.cmc-vp-ig-quadro { opacity: 1; }
.cmc-vp-ig .cmc-vp-carregando { z-index: 2; } /* a janela vem depois no DOM */
.cmc-vp-ig-pronto .cmc-vp-carregando { display: none; }

/* Barra: mesma faixa do player do YouTube, com o que o Instagram deixa fazer */
.cmc-vp-ig .cmc-vp-barra { justify-content: space-between; pointer-events: none; }
.cmc-vp-ig .cmc-vp-barra > * { pointer-events: auto; }
.cmc-vp-credito { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-size: 12px; font-weight: 600; text-decoration: none; opacity: .88; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
.cmc-vp-credito:hover, .cmc-vp-credito:focus { color: #f4b41a; opacity: 1; text-decoration: none; }
.cmc-vp-credito .fa { font-size: 14px; }

/* Materia: sem orientacao fixa — 4:5 e so o ponto de partida, o revista.js acerta
   o quadro no formato real assim que o embed avisa a altura */
.cmc-mat-video-ig .cmc-mat-video-caixa { aspect-ratio: 4 / 5; width: min(100%, 420px); }

/* quadro estreito (marcador pequeno na pagina da revista): so o icone do
   Instagram, senao o texto quebra por cima do video. A classe vem do revista.js,
   que mede o quadro — media query nao serve, o que importa aqui e o quadro. */
.cmc-vp-apertado .cmc-vp-credito span { display: none; }
.cmc-vp-apertado .cmc-vp-barra { padding: 14px 8px 6px; }
.cmc-vp-apertado .cmc-vp-barra button { width: 24px; height: 24px; font-size: 10px; }

@media (max-width: 767px) {
    .cmc-vp-credito { font-size: 11px; }
    .cmc-vp-credito span { display: none; }
}