/* =========================================================
   HOMEPAGE v3 | MAIN v1.7
   /assets/css/main.css
========================================================= */

.homepage{
    background:var(--color-bg);
    padding-top:var(--space-md);
}

/* =========================================================
   DESTAQUE
========================================================= */

/* Slide desativado (bug real, print do Luciano — teste com Banner
   ligado e Slide desligado: o Destaque "invadia" o Banner por falta de
   respiro, já que ninguém mais puxa ele por cima). Classe condicional
   (ver includes/main.php, "$classeDestaqueSemSlide").
   CORRIGIDO em 2026-08-12 (print 123/124, Luciano: "vácuo enorme" com
   o Slide oculto) — a versão original desta regra tinha
   "margin-top:var(--space-md)" (20px) pra "devolver o respiro que
   existe entre Banner e Slide", mas esse respiro JÁ existe sozinho:
   é o "padding-top:var(--space-md)" do próprio ".homepage" (main.php),
   que vale pra qualquer primeiro filho, com ou sem Slide — margin de
   filho NUNCA colapsa com padding do pai (só colapsaria com margin de
   outro elemento), então os 20px daqui somavam por cima dos 20px do
   ".homepage", virando 40px, mais os 30px de padding interno do
   próprio ".featured-card" antes do título — quase 90px de vácuo só
   pra "repetir" um respiro de 20px que já estava garantido. Zerado
   aqui pra não duplicar; o respiro do ".homepage" sozinho já resolve. */

/* "Últimas Notícias" embutido (2026-08-04, print 45, sugestão do
   Enockes) — ocupa a linha inteira do card (ver "flex-wrap" acima),
   com uma linha de separação sutil acima pra não parecer que "gruda"
   direto na imagem/texto do Destaque. Título/subtítulo foram removidos
   de propósito (ver comentário em includes/main.php) — só o carrossel
   + "Ver Todas as Notícias". Importante: o carrossel (".news-carousel"
   etc., ver seção NOTÍCIAS mais abaixo) É O MESMO usado antes na seção
   solta — as classes continuam as mesmas, só o CONTAINER ao redor
   mudou; a largura disponível aqui é a do card (1160px do container −
   2×30px de padding do próprio ".featured-card" = 1100px), menor que
   os 1160px que a seção tinha antes solta — por isso ".news-card"
   também encolheu um pouco (ver comentário na seção NOTÍCIAS). */

/* =========================================================
   TEXTO
========================================================= */

/* =========================================================
   IMAGEM
========================================================= */

/* Hover EXCLUSIVO do Destaque (2026-07-17): o Luciano testou o mesmo
   zoom-pra-fora do resto da home aqui e não gostou — pediu pra tirar
   e, no lugar, usar zoom in + uma leve rotação de 5° pra esquerda,
   contida dentro do frame (por isso ".featured-image" ganhou
   "overflow:hidden" de volta, ao contrário de ".news-card"/
   ".informes-card"/".banner-item"/".partner-item", que continuam com o
   zoom-pra-fora). Efeito único desta seção, não é o padrão do resto da
   homepage. */

/* =========================================================
   HEADER DAS SESSÕES
========================================================= */

/* =========================================================
   NOTÍCIAS
========================================================= */

/* ".home-news" (seção solta) deixou de existir (2026-08-04, print 45)
   — "Últimas Notícias" agora mora dentro de ".featured-card", ver
   ".featured-ultimas" logo acima. Regra mantida comentada só como
   referência histórica de onde o respiro pra "Informes" (próxima
   seção) costumava vir; hoje esse respiro é o "margin-bottom:-50px"
   de ".home-featured" (ver topo deste arquivo) + o padding normal de
   ".home-informes" (regra global "section{padding-block:64px}"). */

/* =========================================================
   CARROSSEL
========================================================= */

/* =========================================================
   ÁREA ÚTIL
========================================================= */

/* =========================================================
   TRACK
========================================================= */

/* =========================================================
   CARD
========================================================= */

/* Novo padrão de hover (2026-07-17, pedido do Luciano): a imagem cresce
   PRA FORA do card em vez de ficar presa/cortada dentro dele — por isso
   o card deixou de ter "overflow:hidden" (ver também ".news-thumb" e
   ".news-thumb img" logo abaixo, e a nota completa em ".partner-item"
   mais adiante neste arquivo). */

/* =========================================================
   THUMB
========================================================= */

/* Hover padrão do site (revisado 2026-07-17): zoom na imagem, mas SEM
   clipar dentro do frame — ela cresce e extrapola o card de propósito,
   com sombra própria pra parecer "flutuando" por cima do que está ao
   redor. z-index no card (acima) garante que ela fique por cima dos
   cards vizinhos, não atrás. */

/* =========================================================
   CONTENT
========================================================= */

/* =========================================================
   SETAS
========================================================= */

/* =========================================================
   RESPIRO DAS SETAS
========================================================= */

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

/* =========================================================
   LOGOS PARCEIROS/INSTITUCIONAIS (2026-08-05, pedido do Luciano) —
   4 logos entre "Últimas Notícias" e "Informe Sindical".
   v2 (2026-08-05, print 76 — "odiei! esquece o recorte circular, coloca
   as logos normais, iguais"): era um badge redondo com fundo branco
   (cortava a logo dentro de um círculo). Virou logo "crua" (sem fundo,
   sem moldura), redimensionada só pela ALTURA — como as 4 têm proporção
   bem diferente entre si (Cedae Saúde e Prece são bem mais largas que
   altas; Dieese e Boletim são quase quadradas), altura igual pra todas
   é o jeito mais próximo de "mesmo tamanho" sem distorcer nenhuma
   (esticar pra virarem exatamente do mesmo tamanho deformaria a logo).
   padding-block PRÓPRIO na seção: sem isso, herdaria os 64px do padrão
   global "section{padding-block:64px}" — reintroduzindo o mesmo vão
   exagerado que acabou de ser reduzido entre o card de Destaque e
   Informe Sindical (ver ".home-featured{padding-bottom}" /
   ".home-informes{padding-top}" logo abaixo).
   v4 (2026-08-05, print 83): ganhou a ".logos-parceiros-faixa" (fundo
   colorido + cantos arredondados, ver bloco próprio abaixo) — proposta
   visual do próprio Luciano, depois de perceber (print 81) que os
   arquivos de logo tinham tamanhos de canvas muito desiguais entre si e
   corrigir isso direto nos arquivos. O padding-top/bottom e o
   margin-top desta seção (regra logo abaixo) continuam sendo o espaço
   ENTRE o Destaque/Informe Sindical e a faixa colorida — o padding
   DENTRO da faixa (ao redor dos logos) é outra regra, própria da
   ".logos-parceiros-faixa".
========================================================= */

/* FAIXA (2026-08-05, print 83 — proposta visual do Luciano, réplica
   medida pixel a pixel em cima do print do Photoshop/navegador dele):
   fundo verde-sálvia claro + cantos arredondados, do tamanho do
   container (1160px), com os 4 logos+legendas dentro.
   Cor de fundo: NÃO é uma cor nova — é a própria "--color-hover" do
   projeto (histórico: era #88a33f, verde; 2026-09-11 passou a #017198,
   azul-claro da logo nova) a
   ~40% de opacidade sobre branco (conferido pixel a pixel no print:
   rgb(207,218,178) bate exatamente com essa conta). Uso rgba() com o
   RGB escrito por extenso porque CSS não permite aplicar opacidade em
   cima de uma custom property em formato hexadecimal. */

/* Altura única pras 4 (2026-08-05, v2) — os arquivos de logo em si já
   foram equilibrados pelo Luciano no Photoshop (print 81), então uma
   altura simples já basta agora; nenhum logo precisa mais de tratamento
   especial (ver histórico do Dieese, comentário removido nesta rodada). */
/* Altura (2026-08-05, print 84 — Luciano: "não! uma linha só, sem
   quebra, reduza mais as logos pra caber tudo") — 72px somado à largura
   real das 4 logos (proporções bem desiguais: Dieese e Cedae Saúde são
   MUITO mais largas que altas) somava ~1211px de conteúdo, estourando
   os ~1080px disponíveis dentro da faixa (1160 do container - 40px de
   padding de cada lado) e quebrando "Boletins" pra 2ª linha. Reduzido
   pra 60px — soma fica em ~1051px, cabe numa linha só com folga.
   v3 (2026-08-05, print 85 — Luciano: "reduza um pouco as logos, tipo
   uns 20% a menos, estão muito grandes") — 60px × 0.8 = 48px. */

/* Asapae (2026-08-11, pedido do Luciano: "essa logo é redonda e
   pequena, aumente em 50%") — logo circular, dentro do mesmo canvas
   quadrado-ish das outras, mas com bem mais espaço vazio ao redor do
   círculo, então "sente-se" menor que as demais mesmo com a mesma
   altura de caixa. Aumentando só a caixa dela (48px × 1.5 = 72px;
   38px × 1.5 = 57px no mobile), sem mexer na altura-padrão das outras
   3 logos. */

/* Legenda (2026-08-05, print 83) — cor verde-oliva mais escura (mesma
   família da faixa, só mais saturada — conferida no print,
   rgb(107,124,65) ≈ #6b7c41), em negrito, pra combinar com o fundo
   colorido em vez de usar o cinza padrão de texto do site. */

/* =========================================================
   INFORMES (óbito / institucional)
========================================================= */

/* Setas do slide (2026-07-28) — só aparecem no tablet/mobile (ver
   @media abaixo); no desktop o grid de 4 colunas continua igual a
   sempre, sem precisar de navegação nenhuma. Visual igual ao
   ".news-arrow" (mesmo componente de carrossel da seção "Últimas
   Notícias"), com nome próprio pra não confundir com ".informes-
   carousel"/".informes-slide" (o carrossel automático do Óbito, que já
   existia dentro do slot 2 — são dois carrosséis diferentes). */

/* =========================================================
   ENTRADA AO ROLAR (2026-08-04, pedido do Luciano — "site muito
   estático") — cada card do Informe Sindical nasce deslocado 100px
   pra baixo e transparente; ao rolar a página e a seção entrar na
   tela (ver assets/js/informes-scroll-reveal.js, IntersectionObserver
   que adiciona ".informe-revelado"), sobe até o lugar final. Atraso
   escalonado por card, mesmo passo de 300ms entre um e outro (ajustado
   em 2026-08-04, versão anterior de 300ms/passo ficou rápida demais pro
   gosto do Luciano) — pedido exato do Luciano, dá a sensação de
   cascata em vez de tudo subir junto. Ponto de partida reduzido de
   900ms pra 600ms em 2026-08-09 (novo pedido do Luciano: "reduza o
   tempo que leva pra deslizar") — sequência passou de
   900/1200/1500/1800ms pra 600/900/1200/1500ms.
   Duração da própria "jornada" (o deslize em si, não o atraso antes
   de começar) aumentada de .6s pra 1.6s no mesmo pedido (2026-08-04,
   "os cards aparecem do nada, muito rápido") — junto com a distância
   maior (50px→100px), o movimento fica visível e lento em vez de um
   "pulo" quase instantâneo.
   O delay fica só na transição de opacity/transform (dentro de
   ".informe-revelado"), nunca na de box-shadow do hover — por isso
   são 2 blocos de "transition" separados, não um só. Dispara 1 vez só
   por carregamento de página (o observer some do card depois do
   primeiro reveal, ver JS). */

/* Acessibilidade: quem pediu menos animação no sistema/navegador vê
   os cards direto no lugar final, sem esperar nenhum atraso nem
   deslocamento — mesmo padrão já usado no pulso do botão Denúncia. */

/* Novo padrão de hover (2026-07-17): imagem cresce pra fora do card, sem
   clipping — mesma mudança aplicada em ".news-card"/".banner-item"/
   ".partner-item", ver nota completa em ".partner-item" mais abaixo. */

/* Link que envolve a imagem do Boletim (único slot com uma camada <a>
   entre o card e a foto — os outros 3 slots não têm esse wrapper) —
   precisa ocupar 100% do card pra que o "height:100%" da imagem (logo
   abaixo) tenha uma base de referência real; sem isso, o <a> ficaria do
   tamanho do próprio conteúdo (auto) e o cálculo de porcentagem da
   imagem não teria de onde partir. */

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

/* =========================================================
   BANNERS INSTITUCIONAIS
========================================================= */

/* Setas do slide (2026-07-28) — mesmo componente/lógica das setas de
   ".informes-grid-arrow" (seção Informes, ver comentário lá), só
   renomeado pra não misturar os dois carrosséis. Escondidas no
   desktop, ver @media abaixo. */

/* Novo padrão de hover (2026-07-17): imagem cresce pra fora do card, sem
   clipping — mesma mudança de ".news-card"/".informes-card"/
   ".partner-item", ver nota completa em ".partner-item" mais abaixo. */

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

/* =========================================================
   PARCEIROS
========================================================= */

/* Bug corrigido em 2026-07-08: o efeito antigo era transform:translateY(-6px)
   no PRÓPRIO card. Como ".partners-slider" tem overflow:hidden colado (sem
   respiro vertical, diferente de ".news-viewport" que tem padding), levantar
   o card cortava a parte de cima da imagem em vez de só "flutuar" — não era
   CSS complexo nem herança, era esse cálculo simples de espaço. Trocado
   naquela época pro padrão do site inteiro: zoom leve na IMAGEM dentro do
   frame fixo do card (clipado pelo overflow:hidden do próprio card).

   PADRÃO REVISADO (2026-07-17, pedido explícito do Luciano): o zoom deixou
   de ficar preso/cortado dentro do card — agora a imagem cresce E EXTRAPOLA
   o frame de propósito (".partner-item"/".news-card"/".banner-item"/
   ".informes-card" perderam o "overflow:hidden"; a própria imagem passou a
   ter o border-radius que antes vinha do container, pra continuar com cara
   de card arredondado em repouso). z-index no hover garante que a imagem
   ampliada fique por cima dos cards vizinhos, não atrás deles — necessário
   porque agora ela realmente ultrapassa a caixa original.

   Continua valendo o espírito de sempre — nunca mover/"levantar" o card,
   só a imagem que cresce — e o mesmo efeito deve ficar igual em qualquer
   card novo da homepage. Páginas fora da home (".staecnon-noticia-
   relacionada-card" em noticia.php, listagem de Notícias, Boletins) ainda
   usam o padrão antigo (zoom preso/clipado) — não foram tocadas nesta
   rodada por não terem sido pedidas; avaliar se o Luciano quer estender
   esse padrão novo pra elas também numa próxima rodada. */

/* =========================================================
   ANIMAÇÃO
========================================================= */

@keyframes partnersScroll{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}

/* =========================================================
   MOBILE
========================================================= */