/* =========================================================
   PROTÓTIPO NOVA HOMEPAGE — INFORME SINDICAL
   prototipo-nova-home/assets/css/homepage2-informe-sindical.css
========================================================= */

.homepage2-informe-sindical{
    /* 2026-09-12, pedido do Luciano: verde #00CF37 (cor da logo) com
       baixa opacidade, mesmo tratamento já usado no fundo de "Serviços"
       e "Dúvidas Frequentes" (assets/css/homepage2-servicos.css/
       homepage2-faq.css) — 12% dá o tom pastel suave. Era #e4edf7. */
    background:rgba(0, 207, 55, .12);
    padding-block:30px;
    /* margin-top:30px (2026-09-12, pedido do Luciano — padronizar o
       espaço ENTRE as seções "Serviços", "Informe Sindical" e "Dúvidas
       Frequentes" em 30px). Comentário antigo sobre "sem margin-top"
       não vale mais: a seção .homepage2-prece (banner Prece fixo) foi
       removida daqui — o informe dinâmico dela agora mora dentro do
       header (ver includes/header2.php). */
    margin-top:30px;
    /* 2026-10-14: o mascote do megafone (right:-70px) saía da tela em
       tablet/notebook (abaixo de ~1340px), criando barra de rolagem
       horizontal. overflow-x:clip corta só o excesso do lado direito e
       mantém overflow-y visível (a cabeça pode passar do topo). */
    overflow-x:clip;
}

.homepage2-informe-sindical-inner{
    position:relative;
    display:flex;
    align-items:flex-start;
    /* 2026-09-13: "gap" não faz mais diferença de verdade (o cabeçalho
       que dividia espaço com o grid foi removido, sobrou só o grid como
       filho) — mantido só por segurança, não atrapalha. padding-right
       continua EXATAMENTE igual (250px): é a área reservada do mascote
       do megafone, que não pode se mover (pedido explícito do Luciano). */
    gap:28px;
    padding-right:250px;
}

/* 2026-09-13 (pedido do Luciano, print temp/261.jpg): bloco
   ".homepage2-informe-sindical-cabecalho" (título/texto/botão) removido
   daqui — o card inteiro saiu do index.php, essas regras ficaram
   órfãs. Nunca guardar lixo (regra do projeto). */

.homepage2-informe-sindical-grid{
    flex:1;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    /* 2026-09-13 (pedido do Luciano, print temp/261.jpg): 16px -> 40px.
       Com o cabeçalho removido, o grid ganhou toda a largura que sobrou
       (até a área do mascote) -- gap maior dá o respiro entre os 3
       banners que estava faltando, em vez de ficarem colados. */
    gap:40px;
}
/* 2026-09-13, pedido do Luciano: cada banner ganhou um título fixo
   (ícone + texto) por cima, pra dar pra entender do que se trata só
   batendo o olho, sem precisar clicar (banner do card 3 nem é mais
   clicável, ver index.php). Coluna vira o item de grid agora (não mais
   o .homepage2-informe-sindical-boletim-card direto) — o card continua
   com sua própria altura ditada pelo aspect-ratio 4/5 da imagem. */
.homepage2-informe-sindical-coluna{
    display:flex;
    flex-direction:column;
    gap:20px; /* 2026-09-13, pedido do Luciano: era 8px, titulo grudado
                 demais no banner. Nao precisa se preocupar com a altura
                 da secao crescer por causa disso. */
    min-width:0;
    position:relative;
}
/* 2026-09-13 (pedido do Luciano, print temp/261.jpg): linha vertical
   separando os 3 banners, já que ficaram maiores e mais próximos das
   bordas -- desenhada centralizada exatamente no meio do gap de 40px
   (por isso left:-20px, metade do gap), então funciona pra qualquer
   largura de coluna sem precisar recalcular nada. Só nas colunas 2 e 3
   (a 1ª não tem vizinha à esquerda). Desligada no tablet/mobile (grid
   empilha em 2/1 colunas, ver @media abaixo) -- linha vertical não faz
   sentido quando os itens quebram linha. */
.homepage2-informe-sindical-coluna:not(:first-child)::before{
    content:"";
    position:absolute;
    left:-20px;
    top:0;
    bottom:0;
    width:1px;
    background:rgba(8,44,68,0.12);
}
html.homepage2-base-dark .homepage2-informe-sindical-coluna:not(:first-child)::before{
    background:rgba(255,255,255,0.14);
}
.homepage2-informe-sindical-titulo{
    display:flex;
    align-items:center;
    gap:10px;
    /* 2026-09-13 (pedido do Luciano): mesma fonte + peso + caixa alta
       já usados nos títulos de seção (ex: "DÚVIDAS FREQUENTES",
       ".homepage2-faq-cabecalho h2") -- era Arimo (fonte padrão de
       texto do site) com font-weight:700. O texto em si continua
       normal (title-case) no PHP -- é só exibido em caixa alta aqui
       via mb_strtoupper() em index.php, pra não sujar a tradução
       compartilhada com outras páginas (ex: t('Boletins') também vira
       o <title> de boletins.php, sem caixa alta lá). */
    font-family:var(--homepage2-base-font-titulo);
    font-weight:600;
    text-transform:uppercase;
    /* 2026-09-13, pedido do Luciano: 18px -> 24px, pra igualar de
       verdade o tamanho dos títulos de seção (".homepage2-faq-cabecalho h2"
       e companhia, também 24px/line-height 1.3) -- antes só a fonte e o
       peso tinham sido padronizados, o tamanho ficou menor. */
    font-size:24px;
    line-height:1.3;
    color:var(--homepage2-base-navy);
}
.homepage2-informe-sindical-titulo i{
    color:var(--homepage2-base-green);
    /* Acompanha o aumento do texto ao lado (era 19px pro texto de 18px) */
    font-size:24px;
}
.homepage2-informe-sindical-boletim-card{
    /* Cantos retos (pedido do Luciano) — era border-radius:14px.
       2026-09-13: tentativa de adicionar padding:10px branco +
       border-radius:10px (print temp/254.jpg) foi REVERTIDA no mesmo
       dia (print temp/257.jpg) — pra abrir espaço pro padding, o grid
       teve que avançar sobre a área do mascote (padding-right do
       .homepage2-informe-sindical-inner, ver acima) e o mascote acabou
       atropelando demais o 3º banner (megafone cobrindo boa parte do
       "Feliz Aniversário"). Não tem espaço sobrando nesse layout pra
       essa borda branca — decisão do Luciano foi voltar exatamente ao
       que era antes. Não tentar essa borda de novo sem repensar
       também a área do mascote. */
    background:#e0f9e6; /* 2026-09-13, pedido do Luciano (print temp/260.jpg): era #ffffff. No refresh, antes da imagem carregar, esse branco aparecia por tras dos cards e denunciava banner fora do tamanho padrao. Trocado pra bater com o fundo da propria secao. */
    /* 2026-09-13, pedido do Luciano: removido box-shadow (era 0 8px 20px rgba(8,44,68,0.08)) -- ele quer os banners "puros", so a imagem mesmo, sem sombreado ao redor. */
    display:flex;
    flex-direction:column;
    text-decoration:none;
}
/* 2026-09-18 (pedido do Luciano): quando o card 3 (Datas
   Comemorativas) tem mais de um banner pro mesmo dia, os banners
   ficam EMPILHADOS um em cima do outro (mesma técnica do mascote do
   Hero, ver homepage2-hero-slider.js) e só um fica visível por vez
   (classe .ativo), alternando via JS a cada 5s (ver
   assets/js/homepage2-datas-comemorativas-slider.js). O card ganha
   position:relative pra virar a "moldura" dos banners empilhados —
   sem isso os <picture position:absolute> abaixo vazariam pra fora
   dele. Não afeta os outros 2 cards (Boletins/Informativos), que
   continuam com só 1 imagem cada. */
.homepage2-informe-sindical-datas-comemorativas{
    position:relative;
}
.homepage2-informe-sindical-datas-comemorativas-item{
    position:absolute;
    inset:0;
    opacity:0;
    transition:opacity 0.6s ease;
    /* pointer-events:none no banner escondido -- sem isso ele fica
       "por cima" na hora do clique mesmo invisível, apesar deste
       card já não ter link nenhum (ver index.php). Mantido por
       segurança/consistência. */
    pointer-events:none;
}
.homepage2-informe-sindical-datas-comemorativas-item.ativo{
    position:relative; /* o banner ativo dita a altura do card (aspect-ratio da img, ver abaixo) -- os demais ficam absolutos por cima/baixo dele */
    opacity:1;
    pointer-events:auto;
    z-index:1;
}
.homepage2-informe-sindical-datas-comemorativas-item img{
    width:100%;
    height:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    background:#e0f9e6;
    display:block;
}

.homepage2-informe-sindical-boletim-card img{
    /* Formato real dos banners é 4:5 — era 420/560 (3:4) antes, um
       chute de quando o card foi criado.
       2026-09-13 (pedido do Luciano, print temp/257.jpg): trocado de
       "object-fit:contain" pra "cover" — decisão ANTERIOR (contain,
       pra nunca cortar o panfleto) partia do pressuposto de que o
       respiro branco do "contain" não chamaria atenção por ser da
       mesma cor do fundo do card. Na prática o Luciano viu esse
       respiro branco embaixo/do lado de banners que não são EXATAMENTE
       4:5 (ex: uploads/geral/2026-08-03.jpg é 1080x1424, não 1080x1350)
       — e isso RESSALTA a imperfeição em vez de disfarçar. A tentativa
       de disfarçar com borda branca ao redor (ver histórico do mesmo
       dia) foi revertida por falta de espaço/mascote atropelando o
       banner. "cover" elimina qualquer respiro, mas cropa o excesso
       (testado nos 3 banners atuais: o pior caso, o de aniversário,
       perde só ~2,6% de cada lado — sem cortar texto nenhum). Se um
       banner futuro vier com proporção BEM diferente de 4:5, o corte
       pode ficar mais agressivo — vale o Enockes conferir o preview
       antes de publicar um banner muito fora do padrão. */
    width:100%;
    aspect-ratio:4/5;
    object-fit:cover;
    background:#e0f9e6; /* mesmo motivo da linha 88 */
    display:block;
}
/* mascote: mesma técnica do Hero/Serviços, ancorado pelo bottom e
   ultrapassando o topo da seção — aqui do lado DIREITO, espelhado.
   z-index:999 pra garantir que fica por cima do banner da Prece (que
   não tem z-index nenhum) mesmo com a sobreposição entre as seções. */
.homepage2-informe-sindical-mascote{
    position:absolute;
    right:-70px;
    bottom:-30px;
    /* 2026-09-13 (pedido do Luciano, print temp/261.jpg, correção no
       mesmo dia): ERA "height:calc(100% + 90px)" -- relativo à altura
       do .homepage2-informe-sindical-inner. Enquanto os banners cresceram
       (remoção do cabeçalho ao lado), a altura da seção aumentou, e o
       mascote -- sendo uma % dessa altura -- cresceu junto, ficando
       desproporcional aos banners. Travado agora em px fixo (o tamanho
       real que ele tinha quando a seção media 337px de altura:
       337 + 90 = 427px), pra não acompanhar mais o crescimento da
       seção. Sem problema a cabeça dele não ultrapassar mais o topo da
       seção como ultrapassava antes (pedido explícito do Luciano). */
    height:427px;
    /* 2026-10-28: era 999 e ficava POR CIMA do chat do Floriano (z-index 600). 50 ainda
       cobre o banner da Prece (sem z-index) e fica abaixo do chat. */
    z-index:50;
    pointer-events:none;
}

/* Animação de corpo inteiro (4 quadros, temp/animação2/, pedido do
   Luciano) — reaproveita ".homepage2-servicos-mascote-anim"/".homepage2-servicos-mascote-anim img"
   (servicos.css): mesma técnica de camadas empilhadas com
   position:absolute+inset:0, só que aqui SEM base fixa — os 4 quadros
   são o corpo inteiro (proporção real dos PNGs: 607x700), então cada
   um entra/sai por completo, não só um braço. */
.homepage2-informe-sindical-mascote-megafone{
    position:relative;
    height:100%;
    aspect-ratio:607/700;
}
.homepage2-informe-sindical-mascote-megafone-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    opacity:0;
    animation-duration:8.4s;
    /* steps() em vez de linear: TROCA SECA entre um quadro e outro (sem
       misturar as duas imagens por cima, tipo "dissolve") — foi isso
       que causava aquele efeito de piscar/clarear na transição (2026-09-03,
       aviso do Luciano: "parece que a imagem pisca"). Com steps(), o
       quadro atual fica 100% visível até o instante exato da troca e
       aí, de uma vez só, vira o próximo — feito passar as páginas de um
       flipbook, não borrar uma imagem na outra. */
    animation-timing-function:steps(1, jump-end);
    animation-iteration-count:infinite;
}
.homepage2-informe-sindical-mascote-megafone-frame-1{ opacity:1; animation-name:homepage2-informe-sindical-megafone-corpo-1; }
.homepage2-informe-sindical-mascote-megafone-frame-2{ animation-name:homepage2-informe-sindical-megafone-corpo-2; }
.homepage2-informe-sindical-mascote-megafone-frame-3{ animation-name:homepage2-informe-sindical-megafone-corpo-3; }
.homepage2-informe-sindical-mascote-megafone-frame-4{ animation-name:homepage2-informe-sindical-megafone-corpo-4; }

/* v5 (pedido do Luciano — 0.15s ficou rápido demais): transição
   (1→2→3→4 e volta) subiu de 0.15s pra 0.20s cada passo. Tempo de
   espera nas duas pontas continua o mesmo, 4s.
   Ciclo: 4s parado(1) + 0.6s indo(1→2→3→4, 0.20s cada) + 4s
   parado(4) + 0.6s voltando(4→3→2→1, 0.20s cada) = 8.4s. */
@keyframes homepage2-informe-sindical-megafone-corpo-1{
    0%, 47.62%{ opacity:1; }
    48.41%, 99.21%{ opacity:0; }
    100%{ opacity:1; }
}
@keyframes homepage2-informe-sindical-megafone-corpo-2{
    0%, 47.62%, 49.21%, 98.41%, 100%{ opacity:0; }
    48.41%{ opacity:1; }
    99.21%{ opacity:1; }
}
@keyframes homepage2-informe-sindical-megafone-corpo-3{
    0%, 48.41%, 50%, 97.62%, 99.21%, 100%{ opacity:0; }
    49.21%{ opacity:1; }
    98.41%{ opacity:1; }
}
@keyframes homepage2-informe-sindical-megafone-corpo-4{
    0%, 49.21%, 98.41%, 100%{ opacity:0; }
    50%, 97.62%{ opacity:1; }
}

@media(prefers-reduced-motion:reduce){
    .homepage2-informe-sindical-mascote-megafone-frame{ animation:none; opacity:0; }
    .homepage2-informe-sindical-mascote-megafone-frame-1{ opacity:1; }
}

@media(max-width:991px){
    .homepage2-informe-sindical-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding-right:var(--homepage2-base-container-padding); /* mantém o respiro dos dois lados (antes zerava um lado e descentralizava tudo) */
    }
    /* 2026-10-20 (pedido do Luciano): no celular o personagem estava pequeno e
       preso dentro da faixa colorida. Agora é maior e a cabeça passa do topo
       da faixa, como no desktop (respiro de 30px mantido sobre o conteúdo
       da seção de cima). */
    .homepage2-informe-sindical-mascote{
        position:relative;
        z-index:2;
        pointer-events:none;
        height:auto;
        width:min(80%, 260px);
        margin:-66px auto 0;
        left:auto;
        right:auto;
        bottom:auto;
        order:-1; /* megafone passa pra cima dos banners, igual aos outros dois personagens */
    }
    .homepage2-informe-sindical-mascote-megafone{
        height:auto;
        width:100%;
    }
    .homepage2-informe-sindical-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    /* Linha vertical some no tablet/mobile: com o grid empilhando em
       2 (ou 1) colunas, os itens quebram linha e a régua deixaria de
       ficar entre "vizinhos de verdade" (ex: separaria o item de cima
       de um lado do de baixo do outro lado, sem sentido nenhum). */
    .homepage2-informe-sindical-coluna:not(:first-child)::before{
        display:none;
    }
}
@media(max-width:600px){
    .homepage2-informe-sindical-grid{
        grid-template-columns:repeat(1, 1fr);
    }
}

/* 2026-09-12 (pedido do Luciano): altura das 3 seções ("Serviços",
   "Informe Sindical" e "Dúvidas Frequentes") padronizada pra ficarem
   iguais — a mais alta das três (esta, "Informe Sindical") tinha 337px de altura
   real no desktop; as outras duas ganham min-height:337px pra
   alcançar a mesma altura. Só no desktop (≥992px): abaixo disso o
   conteúdo empilha em coluna e já fica mais alto que 337px sozinho,
   um min-height fixo aí só atrapalharia. */
@media(min-width:992px){
    .homepage2-informe-sindical{
        min-height:337px;
    }
}