/* =========================================================
   PROTÓTIPO NOVA HOMEPAGE — SERVIÇOS E BENEFÍCIOS
   prototipo-nova-home/assets/css/homepage2-servicos.css
========================================================= */

/* faixa azul-clara (era verde — 2026-09-11, pedido do Luciano, logo
   nova com azul-claro na paleta) ocupa 100% da largura da seção
   (full-bleed), o conteúdo por dentro é que fica limitado ao
   container 1200px */
.homepage2-servicos{
    /* 2026-09-12, pedido do Luciano: azul claro #01BAFA (mesmo tom da
       marca) com baixa opacidade, pra ficar suave — era #E6F8FE. Testado
       com 50% primeiro, mas ficou forte demais (cor de origem é bem
       saturada); 12% dá o tom pastel que ele pediu. */
    background:rgba(1, 186, 250, .12);
    padding-block:30px;
}

.homepage2-servicos-inner{
    position:relative;
    display:flex;
    /* 2026-09-13 (pedido do Luciano, print temp/262.jpg — "mascote está
       flutuando"): causa real era este container (não a seção
       ".homepage2-servicos" em si) ficar mais baixo (247px, altura do
       cabeçalho/cards) do que a altura visível travada da seção
       (337px, ver min-height dela mais abaixo) -- e o mascote é
       posicionado (bottom:-30px) relativo A ESTE container, não à
       seção. Como elemento absolutamente posicionado não conta pra
       altura do flex pai, o container "encolhia" pro tamanho do
       conteúdo em vez do tamanho real da seção, e o mascote (ancorado
       nesse bottom mais alto) sobrava ~30px acima do fundo de
       verdade -- exatamente o vão visto no print. min-height:277px
       (337px da seção MENOS os 30px+30px de padding-block dela) trava
       este container na mesma altura útil da seção, então o mascote
       (bottom:-30px) sempre bate exatamente no fundo real, não importa
       se o conteúdo ao lado for mais curto. Mesmo cálculo já resolvido
       "de graça" no FAQ (".homepage2-faq-inner", cujo conteúdo já bate
       277px sozinho -- por isso nunca teve esse sintoma).
       2026-09-13 (mesmo dia, pedido do Luciano, print temp/263.jpg):
       "align-items" era "flex-start" -- com o container agora mais
       alto (277px) do que o conteúdo de dentro (cabeçalho 241px, grid
       de cards 247px), "flex-start" colava tudo no topo e sobrava um
       vão só embaixo (~30px), nunca em cima -- cards pareciam
       "empurrados pra cima", sem centralizar. Trocado pra "stretch":
       agora cabeçalho e grid ESTICAM pra ocupar os 277px inteiros
       (o cabeçalho nem muda de aparência com isso, o texto dele já
       nasce no topo por padrão); e o grid, que já tinha
       "align-content:center" (ver .homepage2-servicos-grid abaixo --
       antes não tinha efeito nenhum, porque o grid nunca sobrava
       espaço pra centralizar dentro de si mesmo), agora centraliza a
       fileira de cards de verdade dentro desse espaço esticado. */
    align-items:stretch;
    gap:32px;
    padding-left:250px;
    min-height:277px;
}

/* mascote: mesma lógica do Hero — ancorado pelo BOTTOM (pra bater
   exatamente com o bottom dos cards) e ganhando altura extra só
   pra cima, sem cortar nada porque .homepage2-base-secao não tem overflow:hidden */
.homepage2-servicos-mascote{
    position:absolute;
    left:-95px;
    bottom:-30px;
    height:calc(100% + 143px);
    z-index:2;
    pointer-events:none;
}

/* proporção real dos PNGs (450x520) pra reservar a largura certa,
   já que as camadas empilhadas são position:absolute */
.homepage2-servicos-mascote-anim{
    position:relative;
    height:100%;
    aspect-ratio:450/520;
}
.homepage2-servicos-mascote-anim img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
}

/* corpo é estático; só o braço esquerdo (solto, sem prancheta) troca
   de quadro pra simular o movimento descendo até a cintura e voltando */
.homepage2-servicos-mascote-anim-base{
    z-index:1;
}
.homepage2-servicos-mascote-anim-braco{
    z-index:2;
    opacity:0;
    animation-duration:6.5s;
    /* steps() em vez de ease-in-out: troca seca entre os quadros do
       braço, sem misturar uma imagem na outra (mesmo ajuste feito no
       mascote do megafone, 2026-09-03, pedido do Luciano — o crossfade
       "piscava"/clareava no meio da transição). */
    animation-timing-function:steps(1, jump-end);
    animation-iteration-count:infinite;
}
.homepage2-servicos-mascote-anim-braco-1{ opacity:1; animation-name:homepage2-servicos-braco-1; }
.homepage2-servicos-mascote-anim-braco-2{ animation-name:homepage2-servicos-braco-2; }
.homepage2-servicos-mascote-anim-braco-3{ animation-name:homepage2-servicos-braco-3; }
.homepage2-servicos-mascote-anim-braco-4{ animation-name:homepage2-servicos-braco-4; }

/* v2 (pedido do Luciano): espera caiu de 4s pra 3s — os 3 mascotes
   têm atraso proposital entre si (mascote 1 = 3s, mascote 2 = 4s,
   mascote 3 = 3s) pra não se moverem todos juntos; com os 3 em 4s
   antes, o mascote 1 e o 2 acabavam se mexendo ao mesmo tempo, que
   era justamente o que não podia. Transição continua 0.25s por passo.
   Ciclo: 3s + 0.25s + 3s + 0.25s = 6.5s. */
@keyframes homepage2-servicos-braco-1{
    0%,46.15%{ opacity:1; }
    47.44%,98.72%{ opacity:0; }
    100%{ opacity:1; }
}
@keyframes homepage2-servicos-braco-2{
    0%,46.15%,48.72%,97.44%,100%{ opacity:0; }
    47.44%{ opacity:1; }
    98.72%{ opacity:1; }
}
@keyframes homepage2-servicos-braco-3{
    0%,47.44%,50%,96.15%,98.72%,100%{ opacity:0; }
    48.72%{ opacity:1; }
    97.44%{ opacity:1; }
}
@keyframes homepage2-servicos-braco-4{
    0%,48.72%,97.44%,100%{ opacity:0; }
    50%,96.15%{ opacity:1; }
}

@media(prefers-reduced-motion:reduce){
    .homepage2-servicos-mascote-anim-braco{ animation:none; opacity:0; }
    .homepage2-servicos-mascote-anim-braco-1{ opacity:1; }
}

.homepage2-servicos-cabecalho{
    flex-shrink:0;
    /* 2026-09-13 (pedido do Luciano, print temp/264.jpg): mascote
       ficava muito perto/por cima do título -- empurrado 28px pra
       direita pra descolar dele (o grid de cards, que é flex:1,
       encolhe sozinho pra compensar, sem precisar mexer em mais nada). */
    margin-left:28px;
    /* 2026-09-13, pedido do Luciano (print temp/256.jpg): reduzido de 280px
       pra 230px — a 280px sobrava um vão vazio à direita do botão "Ver
       todos os serviços" (o texto do botão nunca precisou dos 280px
       inteiros), empurrando o grid de cards pra um espaço mais estreito
       do que precisava (cards em 148px). Em 230px o título/parágrafo
       ganham 1 linha a mais cada (a altura da coluna sobe de 187px pra
       241px), mas isso não estoura a seção — o card mais alto ao lado
       continua com 247px e a seção inteira segue travada em 337px de
       altura (ver min-height abaixo), então não muda a altura visível
       da seção nem desalinha das outras 2 (Informe Sindical/Dúvidas
       Frequentes). Cards passam de 148px pra 160px cada. Testado ao
       vivo (Claude in Chrome, localhost) antes de aplicar. */
    width:230px;
    padding-top:6px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.homepage2-servicos-cabecalho h2{
    /* Fica sempre navy: ".homepage2-servicos" tem fundo claro fixo (#E6F8FE,
       não usa var(--homepage2-base-bg)) — mesmo motivo do informe-sindical.css. */
    margin:0;
    font-family:var(--homepage2-base-font-titulo);
    font-size:24px;
    line-height:1.3;
    /* 2026-09-11 (pedido do Luciano, print temp/241.jpg): ExtraBold
       (800) "bold demais" pra título de seção informativa — trocado
       pro SemiBold (600) da mesma família (Fira Sans Condensed),
       mesmo espírito do ajuste já feito nos títulos de notícia. */
    font-weight:600;
    color:var(--homepage2-base-navy);
}
.homepage2-servicos-cabecalho p{
    margin:0;
    font-size:16px;
    line-height:1.4;
    color:var(--homepage2-base-text-soft);
}
html.homepage2-base-dark .homepage2-servicos-cabecalho p{
    /* Fundo claro fixo da seção — mesmo motivo do h2. */
    color:#4b5563;
}
.homepage2-servicos-cabecalho .homepage2-base-btn-associado{
    align-self:flex-start;
    margin-top:6px;
}
/* botão azul-escuro com texto branco (o global #04293a é pro botão claro do Hero) */
.homepage2-servicos-cabecalho .homepage2-base-btn-associado{
    color:#ffffff !important;
}

.homepage2-servicos-grid{
    flex:1;
    min-width:0;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    align-content:center;
    gap:16px;
}

/* cada serviço é um cartão branco independente, arredondado,
   flutuando por cima da faixa verde */
.homepage2-servicos-servico-card{
    background:#ffffff;
    border-radius:14px;
    padding:22px 16px;
    box-shadow:0 8px 20px rgba(8,44,68,0.08);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
}
.homepage2-servicos-servico-card-icone{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#E6F8FE;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--homepage2-base-blue);
}
.homepage2-servicos-servico-card-icone svg{
    width:24px;
    height:24px;
}
.homepage2-servicos-servico-card h3{
    margin:0;
    font-size:16px;
    font-weight:700;
    color:var(--homepage2-base-navy);
    line-height:1.3;
}
.homepage2-servicos-servico-card p{
    margin:0;
    font-size:16px;
    line-height:1.4;
    color:var(--homepage2-base-text-soft);
}
html.homepage2-base-dark .homepage2-servicos-servico-card p{
    /* ".homepage2-servicos-servico-card" tem fundo branco fixo — mesmo motivo. */
    color:#4b5563;
}

@media(max-width:991px){
    .homepage2-servicos-inner{
        flex-direction:column;
        align-items:center;
        text-align:center;
        padding-left: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-servicos-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;
        transform:translateX(-8%); /* o desenho não é simétrico no quadro: compensa pra ficar no centro do card */
    }
    .homepage2-servicos-mascote-anim{
        height:auto;
        width:100%;
    }
    .homepage2-servicos-cabecalho{
        width:auto;
        align-items:center;
    }
    /* no celular o título e o texto fluem em 2 linhas (sem as quebras do desktop) */
    .homepage2-servicos-cabecalho .homepage2-quebra{
        display:none;
    }
    .homepage2-servicos-cabecalho h2,
    .homepage2-servicos-cabecalho p{
        text-wrap:balance;
    }
    .homepage2-servicos-cabecalho .homepage2-base-btn-associado{
        align-self:center;
    }
    .homepage2-servicos-grid{
        grid-template-columns:repeat(2, 1fr);
    }
}
@media(max-width:600px){
    .homepage2-servicos-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, "Serviços") 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-servicos{
        min-height:337px;
    }
}

/* 2026-10-14 (revisão responsiva): em tablet na horizontal (992px–1099px)
   sobram só ~460px para o grid depois do mascote (250px) e do texto, e
   4 colunas estouravam a tela (4º cartão cortado e barra de rolagem
   horizontal). Aqui o grid passa pra 2 colunas, igual ao tablet em pé. */
@media(min-width:992px) and (max-width:1099px){
    .homepage2-servicos-grid{
        grid-template-columns:repeat(2, 1fr);
    }
    /* altura travada (menor que os 480px do desktop pra não cobrir o texto):
       com 2 fileiras a seção cresce e o mascote, sendo % dela, crescia
       junto e cobria o texto */
    .homepage2-servicos-mascote{
        height:430px;
    }
}