/* =========================================================
   PROTÓTIPO NOVA HOMEPAGE — DÚVIDAS FREQUENTES (FAQ)
   prototipo-nova-home/assets/css/homepage2-faq.css
========================================================= */

.homepage2-faq{
    /* 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;
    margin-top:30px; /* era 24px — 2026-09-12, pedido do Luciano: padronizar
        o espaço ENTRE "Serviços"/"Informe Sindical"/"Dúvidas Frequentes"
        em 30px */
}

.homepage2-faq-inner{
    position:relative;
    display:flex;
    align-items:flex-start;
    gap:28px;
    padding-left:250px;
}

/* mascote: mesma técnica das seções anteriores — ancorado pelo bottom,
   ultrapassando o topo da seção */
.homepage2-faq-mascote{
    position:absolute;
    left:-90px;
    bottom:-30px;
    height:calc(100% + 130px);
    z-index:2;
    pointer-events:none;
}
/* Animação de corpo inteiro (4 quadros, temp/animação3/, pedido do
   Luciano) — mesma técnica de camadas empilhadas de servicos.css/
   informe-sindical.css: quadros do mesmo tamanho (558x700) empilhados
   com position:absolute+inset:0, trocando com steps() (troca seca,
   sem crossfade/"piscar"). */
.homepage2-faq-mascote-pensativo{
    position:relative;
    height:100%;
    aspect-ratio:558/700;
}
.homepage2-faq-mascote-pensativo-frame{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:block;
    opacity:0;
    animation-duration:6.5s;
    animation-timing-function:steps(1, jump-end);
    animation-iteration-count:infinite;
}
.homepage2-faq-mascote-pensativo-frame-1{ opacity:1; animation-name:homepage2-faq-pensativo-corpo-1; }
.homepage2-faq-mascote-pensativo-frame-2{ animation-name:homepage2-faq-pensativo-corpo-2; }
.homepage2-faq-mascote-pensativo-frame-3{ animation-name:homepage2-faq-pensativo-corpo-3; }
.homepage2-faq-mascote-pensativo-frame-4{ animation-name:homepage2-faq-pensativo-corpo-4; }

/* ciclo de 10.5s: 5s parado no quadro 1 (pensativo) + 0.25s por passo
   indo (1→2→3→4) + 5s parado no quadro 4 (positivo/"joia") + 0.25s por
   passo voltando (4→3→2→1). */
/* v3 (pedido do Luciano): tempo de espera nas pontas caiu de 5s 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, mas
   5s "era uma eternidade" pra este aqui. Transição continua 0.25s por
   passo. Ciclo: 3s + 0.25s + 3s + 0.25s = 6.5s. */
@keyframes homepage2-faq-pensativo-corpo-1{
    0%,46.15%{ opacity:1; }
    47.44%,98.72%{ opacity:0; }
    100%{ opacity:1; }
}
@keyframes homepage2-faq-pensativo-corpo-2{
    0%,46.15%,48.72%,97.44%,100%{ opacity:0; }
    47.44%{ opacity:1; }
    98.72%{ opacity:1; }
}
@keyframes homepage2-faq-pensativo-corpo-3{
    0%,47.44%,50%,96.15%,98.72%,100%{ opacity:0; }
    48.72%{ opacity:1; }
    97.44%{ opacity:1; }
}
@keyframes homepage2-faq-pensativo-corpo-4{
    0%,48.72%,97.44%,100%{ opacity:0; }
    50%,96.15%{ opacity:1; }
}

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

.homepage2-faq-cabecalho{
    /* Sem padding-top (era 6px) — pedido do Luciano (print 221.jpg):
       alinhar o topo do título/lista com o topo do card "Não
       encontrou o que procurava?" ao lado. */
    flex-shrink:0;
    width:230px;
    display:flex;
    flex-direction:column;
    gap:10px;
}
.homepage2-faq-cabecalho h2{
    /* Fica sempre navy: ".homepage2-faq" tem fundo claro fixo (#E6F8FE, não
       usa var(--homepage2-base-bg)), então não muda com o tema — virar ".homepage2-base-text"
       no dark mode deixava o título quase invisível em cima do verde
       claro (print 224.jpg, achado do Luciano). */
    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-faq-cabecalho p{
    margin:0;
    font-size:16px;
    line-height:1.4;
    color:var(--homepage2-base-text-soft);
}
html.homepage2-base-dark .homepage2-faq-cabecalho p{
    /* Mesmo motivo do h2: fundo claro fixo da seção, "--homepage2-base-text-soft"
       no dark mode fica claro demais e quase some (print 224.jpg). */
    color:#4b5563;
}
.homepage2-faq-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-faq-cabecalho .homepage2-base-btn-associado{
    color:#ffffff !important;
}

.homepage2-faq-lista{
    /* margin-top negativo compensa o padding-top:12px de cada
       ".homepage2-faq-item" (ver abaixo), puxando a 1ª linha pra cima —
       mesmo pedido de alinhamento do ".homepage2-faq-cabecalho" acima. */
    flex:1;
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6px 24px;
    align-content:center;
    margin-top:-12px;
}
.homepage2-faq-item{
    /* Mesmo motivo do h2 acima: fundo claro fixo da seção, cor navy
       sempre. */
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 4px;
    border-bottom:1px solid rgba(8,44,68,0.1);
    text-decoration:none;
    color:var(--homepage2-base-navy);
    font-size:16px;
    font-weight:600;
}
.homepage2-faq-item svg{
    flex-shrink:0;
    width:18px;
    height:18px;
    color:var(--homepage2-base-blue);
}

/* cartão "não encontrou o que procurava" — branco, dentro da faixa
   verde, largura fixa na ponta direita */
.homepage2-faq-whatsapp{
    flex-shrink:0;
    width:220px;
    background:#ffffff;
    border-radius:14px;
    padding:22px 18px;
    box-shadow:0 8px 20px rgba(8,44,68,0.08);
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
.homepage2-faq-whatsapp-icone{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#E6F8FE;
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--homepage2-base-blue);
}
.homepage2-faq-whatsapp-icone svg{
    width:24px;
    height:24px;
}
.homepage2-faq-whatsapp h3{
    /* Fica sempre navy de propósito — ".homepage2-faq-whatsapp" tem fundo
       branco fixo (não usa var(--homepage2-base-bg)), então não precisa virar
       ".homepage2-base-text" no dark mode; ficaria claro-sobre-branco, invisível
       do jeito oposto. */
    margin:0;
    font-size:16px;
    font-weight:700;
    color:var(--homepage2-base-navy);
    line-height:1.3;
}
.homepage2-faq-whatsapp p{
    margin:0;
    font-size:16px;
    line-height:1.4;
    color:var(--homepage2-base-text-soft);
}
html.homepage2-base-dark .homepage2-faq-whatsapp p{
    /* ".homepage2-faq-whatsapp" tem fundo branco fixo — mesmo motivo. */
    color:#4b5563;
}
.homepage2-faq-whatsapp .homepage2-base-btn-associado{
    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:6px;
    /* 2026-10-02 (pedido do Luciano): esse botão é o WhatsApp, não o
       "Associe-se" — ".homepage2-base-btn-associado" hoje é azul (a
       variável --homepage2-base-green guarda azul, só o nome ficou
       antigo), então aqui vira o verde padrão do WhatsApp em vez de
       herdar o azul do botão compartilhado. */
    background:#25D366;
    color:#04293a !important; /* 2026-10-20 contraste (PageSpeed) */
}
.homepage2-faq-whatsapp .homepage2-base-btn-associado:hover{
    background:#1EBE57;
}
.homepage2-faq-whatsapp .homepage2-base-btn-associado svg{
    width:16px;
    height:16px;
}

@media(max-width:991px){
    .homepage2-faq-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-faq-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(-3%); /* o desenho não é simétrico no quadro: compensa pra ficar no centro do card */
    }
    .homepage2-faq-mascote-pensativo{
        height:auto;
        width:100%;
    }
    .homepage2-faq-cabecalho{
        width:auto;
        align-items:center;
    }
    .homepage2-faq-cabecalho .homepage2-base-btn-associado{
        align-self:center;
    }
    .homepage2-faq-lista{
        grid-template-columns:1fr;
        width:100%;
        text-align:left; /* perguntas que quebram em 2 linhas ficavam centralizadas (herdavam o center da seção) */
    }
    /* card "Não encontrou o que procurava?" ocupa a largura toda (mais retangular, menos alto) */
    .homepage2-faq-whatsapp{
        width:100%;
    }
}

/* 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, "Dúvidas Frequentes") 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-faq{
        min-height:337px;
    }
}