/* =========================================================
   PROTÓTIPO NOVA HOMEPAGE — HEADER
   prototipo-nova-home/assets/css/homepage2-header.css
   -----------------------------------------------------------
   Construído do ZERO (não reaproveita assets/css/header.css do
   site atual) — pedido explícito do Luciano: essa pasta é um
   protótipo isolado pra o Enockes avaliar a proposta de redesign
   antes de decidir se vira o site de verdade. Ver anotações
   inline nos pontos que ainda são decisão em aberto.

   Regras permanentes do projeto que este arquivo já respeita:
   - Nenhum texto visível abaixo de 16px.
   - Container útil de 1200px (mesma largura que o site já usa
     hoje — só a decisão do "respiro lateral" mudou, ver abaixo).
========================================================= */

/* Atma Light (slogan do cabeçalho) — hospedada aqui, nunca no Google Fonts
   (regra do Luciano, 2026-10-20). Só o subconjunto latino (cobre o português). */
@font-face{
    font-family:'Atma';
    font-weight:300;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/atma/atma-300-latin.woff2') format('woff2');
}
@font-face{
    font-family:'Lato';
    font-weight:400;
    font-style:normal;
    font-display:swap;
    src:
        url('../fonts/lato/subset-Lato-Regular.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Regular.woff') format('woff');
}
@font-face{
    font-family:'Lato';
    font-weight:700;
    font-style:normal;
    font-display:swap;
    src:
        url('../fonts/lato/subset-Lato-Bold.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Bold.woff') format('woff');
}
@font-face{
    font-family:'Lato';
    font-weight:900;
    font-style:normal;
    font-display:swap;
    src:
        url('../fonts/lato/subset-Lato-Black.woff2') format('woff2'),
        url('../fonts/lato/subset-Lato-Black.woff') format('woff');
}
/* Migrado do Google Fonts (fonts.gstatic.com) pra local em 2026-09-10
   (missão: nenhuma fonte self-hosted deste jeito deve continuar
   apontando pra CDN externo) — reaproveita o MESMO subset Lato que já
   é servido localmente em produção (assets/fonts/lato/, ver
   assets/css/base.css), em vez de duplicar arquivo/gastar requisição
   externa. Nenhum arquivo novo baixado. */

/* Fonte dos títulos (headings) — Fira Sans Condensed ExtraBold (800).
   Escolhida pra bater com o estilo bold/condensada do mockup
   temp/nova-homepage/04.png. Já vem self-hosted (arquivos locais
   em assets/fonts/Fira_Sans_Condensed/), diferente da Lato acima
   que ainda está no CDN do Google — só peso 800 foi convertido
   pro protótipo porque é o único que os títulos usam por enquanto. */
@font-face{
    font-family:'Fira Sans Condensed';
    font-weight:800;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-ExtraBold-latin.woff2') format('woff2'),
        url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-ExtraBold.woff') format('woff');
}
/* 2026-09-11 (pedido do Luciano, print temp/240.jpg): o ExtraBold 800
   ficou "condensado demais" nos títulos de notícia (tamanho pequeno) —
   pesos mais leves da MESMA família convertidos pra testar aqui
   (títulos das notícias na home, ver homepage2-destaques.css).
   Continua sendo só a família 'Fira Sans Condensed' — o navegador
   escolhe a face certa pelo font-weight pedido no CSS. */
@font-face{
    font-family:'Fira Sans Condensed';
    font-weight:500;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-Medium-latin.woff2') format('woff2'),
        url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-Medium.woff') format('woff');
}
@font-face{
    font-family:'Fira Sans Condensed';
    font-weight:600;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-SemiBold-latin.woff2') format('woff2'),
        url('../fonts/Fira_Sans_Condensed/FiraSansCondensed-SemiBold.woff') format('woff');
}
/* 2026-09-11 (pedido do Luciano): fonte manuscrita pro slogan "Em
   defesa do Saneamento e dos Direitos" abaixo da logo (ver
   .homepage2-header-logo-tagline mais abaixo). Mesmo arquivo/peso
   registrado de novo aqui (duplicado de base.css) porque esta família
   de páginas não carrega base.css — mesmo padrão já usado pra Fira
   Sans Condensed. */
@font-face{
    font-family:'Caveat';
    font-weight:700;
    font-style:normal;
    font-display:swap;
    src:url('../fonts/Caveat/Caveat-Bold.woff2') format('woff2'),
        url('../fonts/Caveat/Caveat-Bold.woff') format('woff');
}

:root{
    --homepage2-base-navy:#082c44;
    --homepage2-base-blue:#0B6AA2;
    --homepage2-base-green:#017198; /* era #3f9d46 (verde) — 2026-09-11, pedido do Luciano: logo nova (Enockes) trouxe azul-claro pra paleta oficial, essa variável (nome mantido por compatibilidade) passa a guardar esse azul */
    --homepage2-base-green-dark:#016284; /* era #2f7a36 — mesmo motivo acima */
    --homepage2-base-text:#1c2733;
    --homepage2-base-text-soft:#4b5563;
    --homepage2-base-border:#e5e7eb;
    --homepage2-base-bg:#ffffff;
    --homepage2-base-container-max:1200px;
    --homepage2-base-container-padding:20px;
    --homepage2-base-font-titulo:'Fira Sans Condensed', 'Lato', system-ui, sans-serif;
}

html.homepage2-base-dark{
    --homepage2-base-navy:#0b1830;
    --homepage2-base-blue:#7fb8e0;
    --homepage2-base-text:#edf4fa;
    --homepage2-base-text-soft:#c9d7e4;
    --homepage2-base-border:#233b5c;
    --homepage2-base-bg:#101f38;
}

*{box-sizing:border-box;}

body{
    margin:0;
    font-family:'Lato', system-ui, sans-serif;
    background:var(--homepage2-base-bg);
    color:var(--homepage2-base-text);
    transition:background 200ms ease, color 200ms ease;
}

/* =========================================================
   CONTAINER
   -----------------------------------------------------------
   Discussão em aberto (2026-09-03): o site atual usa 1200px de
   container + 20px de respiro de cada lado (1160px úteis). O
   Luciano quer ganhar esses 40px inteiros no desktop largo, sem
   perder o respiro no mobile/tablet — abaixo de 1240px de
   viewport o respiro volta, porque senão o conteúdo gruda na
   borda da tela. Ajustar o breakpoint se o Luciano preferir outro
   valor.
========================================================= */
.homepage2-base-container{
    width:100%;
    max-width:var(--homepage2-base-container-max);
    margin-inline:auto;
    padding-inline:var(--homepage2-base-container-padding);
}
@media(min-width:1240px){
    .homepage2-base-container{
        padding-inline:0;
    }
}

/* =========================================================
   TOPBAR
========================================================= */
.homepage2-header-topbar{
    background:var(--homepage2-base-navy);
    color:#ffffff;
}
.homepage2-header-topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    min-height:44px;
    flex-wrap:wrap;
    padding-block:6px;
}
.homepage2-header-topbar-left,
.homepage2-header-topbar-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.homepage2-header-topbar a,
.homepage2-header-icon-btn{
    color:#ffffff;
    text-decoration:none;
    font-size:16px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.homepage2-header-topbar a:hover{
    color:#01BAFA; /* azul-claro da logo (mesmo dos links do footer) — antes usava var(--homepage2-base-green) = #017198, escuro demais sobre o fundo navy da topbar */
}

.homepage2-header-icon-btn{
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    width:28px;
    height:28px;
    justify-content:center;
    border-radius:6px;
}
.homepage2-header-icon-btn:hover{
    background:rgba(255,255,255,0.12);
    color:var(--homepage2-base-green);
}
.homepage2-header-icon-btn svg{
    width:17px;
    height:17px;
}
/* Alterna lua/sol conforme o tema atual (pedido do Luciano: no dark
   mode o ícone tem que virar SOL, já que ele liga o modo CLARO — a
   lua sozinha nos dois modos não fazia sentido). O JS só troca a
   classe "homepage2-base-dark" no <html>; quem decide qual SVG aparece é o CSS. */
.homepage2-header-icone-sol{
    display:none;
}
html.homepage2-base-dark .homepage2-header-icone-lua{
    display:none;
}
html.homepage2-base-dark .homepage2-header-icone-sol{
    display:block;
}

.homepage2-header-font-controls{
    display:flex;
    align-items:center;
    gap:2px;
}
.homepage2-header-font-controls button{
    background:none;
    border:none;
    color:#ffffff;
    cursor:pointer;
    font-family:inherit;
    font-weight:700;
    font-size:16px;
    width:28px;
    height:28px;
    border-radius:6px;
}
.homepage2-header-font-controls button:hover{
    background:rgba(255,255,255,0.12);
    color:var(--homepage2-base-green);
}

.homepage2-header-topbar-divider{
    width:1px;
    height:18px;
    background:rgba(255,255,255,0.25);
}


.homepage2-header-idioma{
    position:relative;
}
.homepage2-header-idioma-btn{
    background:none;
    border:none;
    color:#ffffff;
    font-family:inherit;
    font-size:16px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
}
.homepage2-header-idioma-btn:hover{
    color:var(--homepage2-base-green);
}
.homepage2-header-idioma-menu{
    /* Sem "gap" entre o botão e o menu (era +8px) — com hover, esse
       respiro criava uma faixa de espaço vazio onde o mouse não
       está sobre NENHUM elemento, perdendo o ":hover" no meio do
       caminho e fechando o menu (achado do Luciano: "tenho que ser
       muito rápido"). Mesmo padrão já usado (sem gap) no dropdown
       do menu superior, que nunca teve esse problema. */
    position:absolute;
    top:100%;
    right:0;
    background:var(--homepage2-base-bg);
    color:var(--homepage2-base-text);
    border:1px solid var(--homepage2-base-border);
    border-radius:8px;
    box-shadow:0 12px 30px rgba(0,0,0,0.18);
    min-width:150px;
    padding:6px;
    display:none;
    z-index:400;
}
.homepage2-header-idioma.is-aberto .homepage2-header-idioma-menu{
    display:block;
}
/* Hover instantâneo, mesmo padrão do dropdown do menu superior
   (pedido do Luciano) — o clique continua funcionando também, pra
   quem navega por teclado/toque. Desativado abaixo de 1024px, mesmo
   breakpoint já usado no ".homepage2-header-nav-item", só o clique abre em telas
   estreitas. */
@media(min-width:1025px){
    .homepage2-header-idioma:hover .homepage2-header-idioma-menu{
        display:block;
    }
}
.homepage2-header-idioma-menu a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 10px;
    border-radius:6px;
    color:var(--homepage2-base-text);
    text-decoration:none;
    font-size:16px;
}
.homepage2-header-idioma-bandeira{
    width:20px;
    height:14px;
    flex-shrink:0;
    border-radius:2px;
    box-shadow:0 0 0 1px rgba(0,0,0,0.08);
}
.homepage2-header-idioma-menu a:hover{
    background:var(--homepage2-base-navy);
    color:#ffffff;
}

.homepage2-base-btn-associado{
    /* Retângulo com cantos arredondados (10px) — mesmo padrão do
       "Associe-se" e do "Conheça o Staecnon" lá no Hero (pedido do
       Luciano: ele gostou desse formato e quis padronizar em todos
       os outros "Associe-se" do site, que antes eram pílula/999px:
       topo do header, FAQ, Informe Sindical, Serviços). */
    background:var(--homepage2-base-green);
    color:#04293a !important; /* 2026-10-20 contraste (PageSpeed): texto escuro sobre o azul-claro */
    font-weight:700;
    font-size:16px;
    line-height:1;
    padding:16px 22px;
    border-radius:10px;
    text-decoration:none;
    white-space:nowrap;
    transition:background 150ms ease;
}
.homepage2-base-btn-associado:hover{
    background:var(--homepage2-base-green-dark);
    color:#ffffff !important;
}
/* Exceção: dentro da topbar (faixa fininha do topo) o "Área do
   Associado" volta pro padding mais fino de antes — senão ele fica
   maior que a própria faixa e "estoura" a altura dela (achado do
   Luciano, ao padronizar a altura do "Associe-se" em 16px 22px). */
.homepage2-header-topbar-right .homepage2-base-btn-associado{
    padding:8px 18px;
}

/* =========================================================
   LINHA PRINCIPAL (logo + hambúrguer + busca/fale conosco)
========================================================= */
.homepage2-header-mainheader{
    background:var(--homepage2-base-bg);
    border-bottom:1px solid var(--homepage2-base-border);
}
/* 2026-09-08 (pedido do Luciano, v2 — a v1 com position:absolute
   vazou a logo por cima do menu de baixo, ver print temp/237.jpg):
   virou grid de 3 colunas (esquerda/centro/direita) em vez de flex.
   As duas colunas das pontas são "1fr" cada — IGUAIS entre si — então
   a coluna do meio (onde mora a logo) fica no centro EXATO do header,
   não importa se o hambúrguer de um lado é mais largo/estreito que
   busca+Fale Conosco do outro. A logo volta a ficar no fluxo normal
   (sem position:absolute), então a altura da linha simplesmente segue
   a altura dela de novo — e pra logo maior (120px) não esticar o
   header, o padding-block foi reduzido de 26px pra 19px.
   2026-09-11: logo cresceu de novo (120px→132px) e ganhou uma 2ª linha
   embaixo (.homepage2-header-logo-tagline, o slogan em manuscrita) —
   a altura do header não é mais um número fixo de propósito, ela
   segue o conteúdo (grid + align-items:center), então cresce sozinha
   pra caber as duas linhas sem precisar mexer em padding-block de
   novo. */
.homepage2-header-mainheader-inner{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
    padding-block:19px;
}

.homepage2-header-menu-toggle{
    grid-column:1;
    justify-self:start;
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:none;
    border:2px solid var(--homepage2-base-border);
    border-radius:10px;
    padding:10px 16px;
    font-family:inherit;
    font-weight:700;
    font-size:16px;
    color:var(--homepage2-base-navy);
    cursor:pointer;
    flex-shrink:0;
}
.homepage2-header-menu-toggle:hover{
    border-color:var(--homepage2-base-blue);
    color:var(--homepage2-base-blue);
}
html.homepage2-base-dark .homepage2-header-menu-toggle{
    /* --homepage2-base-navy vira quase-preto no dark mode (é a cor de fundo do
       header nesse modo), entao o texto/icone do MENU precisa usar
       --homepage2-base-text (clara) em vez de --homepage2-base-navy pra nao sumir. */
    color:var(--homepage2-base-text);
}
.homepage2-header-menu-toggle svg{
    width:20px;
    height:20px;
}

.homepage2-header-logo{
    grid-column:2;
    justify-self:center;
    display:inline-flex;
    /* 2026-09-11 (pedido do Luciano): logo v3 não traz mais o slogan
       desenhado dentro da imagem — volta a ser HTML solto
       (.homepage2-header-logo-tagline), empilhado ABAIXO da logo e
       centralizado. Por isso vira coluna em vez de só a imagem. */
    flex-direction:column;
    align-items:center;
    text-decoration:none; /* 2026-09-11 (achado do Luciano, print temp/fonts1.jpg):
        essa página não carrega um reset global "a{text-decoration:none}"
        (só base.css/header antigo tem isso) — sem essa linha, o navegador
        sublinha o texto do slogan (único conteúdo de texto dentro do link
        da logo), o que nunca foi pedido. */
}
.homepage2-header-logo img{
    /* 120px → 132px (2026-09-11, pedido do Luciano, logo nova v3 com o
       azul-claro da marca: "aproveite para aumentar um pouco mais"). */
    height:132px; /* era 120px (antes 106px) */
    width:auto;
    display:block;
}
html.homepage2-base-dark .homepage2-header-logo img{
    /* Modo escuro: a logo (mesmo a v3, com navy+verde+azul-claro) leva
       um filtro brightness(0)+invert(1), que ZERA toda cor e converte
       qualquer pixel opaco pra branco — funciona igual em logo
       monocromática ou colorida, sem precisar de arquivo separado. */
    filter:brightness(0) invert(1);
}
.homepage2-header-logo-tagline{
    margin-top:2px;
    font-family:'Caveat', cursive;
    font-weight:700;
    font-size:22px;
    line-height:1.1;
    color:var(--homepage2-base-navy);
    white-space:nowrap;
}
/* TESTE TEMPORÁRIO (2026-09-11, pedido do Luciano) — comparação ao vivo
   Ms Madi x Atma pro slogan, puxadas do Google Fonts (ver <link> em
   includes/header2.php). REMOVER estas 2 regras + os spans duplicados
   no PHP assim que o Luciano decidir qual fonte fica. */
.homepage2-header-logo-tagline--teste-atma{
    /* 2026-09-11 (pedido do Luciano): Life Savers reprovada, ficando só com a
       Atma por enquanto ("ainda estou testando" — segue temporário, puxada
       do Google Fonts, ver <link> em includes/header2.php). Afastada um
       pouco mais da logo e aumentada, a pedido dele. */
    font-family:'Atma', cursive;
    font-weight:300; /* era 400 — Luciano achou "encorpada" no 26px, baixado
        pro peso "Light" (o mais fino que a Atma tem no Google Fonts) */
    /* font-style:italic REMOVIDO (2026-09-12, pedido do Luciano — "enjoei
       do itálico, deixe normal mesmo"). Era só um teste mesmo (ver
       comentário acima), Atma nem tem itálico de verdade no Google Fonts. */
    margin-top:10px; /* era 0 (2ª linha colada na 1ª), depois 2px (herdado) —
        agora afastada mais da logo, pedido do Luciano */
    font-size:26px; /* era 22px (herdado) — aumentada, pedido do Luciano */
}
html.homepage2-base-dark .homepage2-header-logo-tagline{
    color:var(--homepage2-base-text);
}

.homepage2-header-mainheader-right{
    grid-column:3;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:22px;
}
.homepage2-header-busca-btn{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--homepage2-base-navy);
    padding:6px;
}
.homepage2-header-busca-btn:hover{
    color:var(--homepage2-base-blue);
}
.homepage2-header-busca-btn svg{
    width:22px;
    height:22px;
}
html.homepage2-base-dark .homepage2-header-busca-btn{
    /* --homepage2-base-navy vira quase-preto no dark mode, some por cima do
       fundo escuro do header (print 222.jpg, achado do Luciano). */
    color:var(--homepage2-base-text);
}

/* Botão "Associe-se" do header principal (2026-09-12, pedido do
   Luciano — antes era o link "Fale Conosco", que apontava pra "#" e
   não tinha destino real). Mesma cor/pílula que o convite da topbar
   usava antes (.homepage2-header-topbar-filiese-destaque, removido no
   mesmo dia por ficar redundante com este aqui) — cor sólida fixa
   (não segue tema), então não precisa de regra de dark mode. */
.homepage2-header-mainheader-associese{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:#01BAFA;
    color:#04293a !important; /* 2026-10-20 contraste (PageSpeed) */
    text-decoration:none;
    padding:10px 18px;
    border-radius:10px;
    font-weight:600;
    font-size:16px;
    white-space:nowrap;
    transition:background .2s;
}
.homepage2-header-mainheader-associese:hover{
    background:#017198;
    color:#ffffff !important;
}
.homepage2-header-mainheader-associese i{
    font-size:18px;
}

/* 2026-09-12 (pedido do Luciano): efeitos chamativos em loop, portados
   do botão "ASSOCIE-SE" do header do projeto Stieen (ver print
   temp/252.jpg e stieen.org.br/assets/css/site.css,
   @keyframes stieen-associe-efeitos) — 4 movimentos num ciclo de 12s
   (3s entre cada um): onda (anel de box-shadow expandindo, mesmo
   espírito do botão Denúncia acima), chacoalhar (rotação ±2deg, mesmo
   efeito do banner informe logo abaixo do header), onda de novo, e
   tremedeira (vibração lateral). Cor do anel adaptada pro azul do
   Staecnon (rgba(1,186,250,...) em vez do vermelho do Stieen). Pausa
   no hover/foco (mesmo padrão já usado no informe) e respeita
   prefers-reduced-motion (mesmo padrão já usado em todo o projeto). */
.homepage2-header-mainheader-associese{
    animation:homepage2-header-associese-efeitos 12s ease-in-out infinite;
}
.homepage2-header-mainheader-associese:hover,
.homepage2-header-mainheader-associese:focus-visible{
    animation-play-state:paused;
}

@keyframes homepage2-header-associese-efeitos{
    0%, 9%, 25%, 27.5%, 50%, 59%, 75%, 80.83%, 100%{
        transform:none;
        box-shadow:0 0 0 0 rgba(1,186,250,0);
    }

    /* Movimento 1 (t=0s) — onda */
    4.17%{ box-shadow:0 0 0 0 rgba(1,186,250,.55); }
    8.33%{ box-shadow:0 0 0 16px rgba(1,186,250,0); }

    /* Movimento 2 (t=3s, 25% de 12s) — chacoalhar (rotação) */
    25.42%{ transform:rotate(-2deg); }
    25.83%{ transform:rotate(2deg); }
    26.25%{ transform:rotate(-2deg); }
    26.67%{ transform:rotate(2deg); }
    27.08%{ transform:rotate(-2deg); }

    /* Movimento 3 (t=6s, 50% de 12s) — onda de novo */
    54.17%{ box-shadow:0 0 0 0 rgba(1,186,250,.55); }
    58.33%{ box-shadow:0 0 0 16px rgba(1,186,250,0); }

    /* Movimento 4 (t=9s, 75% de 12s) — tremedeira (vibração lateral) */
    75.83%{ transform:translateX(-4px); }
    76.67%{ transform:translateX(4px); }
    77.5%{ transform:translateX(-4px); }
    78.33%{ transform:translateX(4px); }
    79.17%{ transform:translateX(-2px); }
    80%{ transform:translateX(2px); }
}

@media(prefers-reduced-motion:reduce){
    .homepage2-header-mainheader-associese{
        animation:none;
    }
}

/* =========================================================
   NAV HORIZONTAL
========================================================= */
.homepage2-header-nav{
    background:var(--homepage2-base-bg);
    border-bottom:1px solid var(--homepage2-base-border);
}
.homepage2-header-nav ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center; /* 2026-09-11 (pedido do Luciano): menu centralizado,
        mesmo padrão já usado no header antigo (".main-nav-fixo .container") */
    gap:24px;
    flex-wrap:wrap;
}
.homepage2-header-nav a,
.homepage2-header-nav-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--homepage2-base-text);
    text-decoration:none;
    font-weight:700;
    font-size:16px;
    padding-block:14px;
    border-bottom:3px solid transparent;
}
/* .homepage2-header-nav-toggle é um <button> (não <a>) — precisa resetar a
   aparência padrão de botão do navegador pra ficar idêntico aos
   links simples (Jurídico/Contato) ao lado. */
.homepage2-header-nav-toggle{
    background:none;
    border-top:none;
    border-left:none;
    border-right:none;
    font-family:inherit;
    cursor:pointer;
}
.homepage2-header-nav a:hover,
.homepage2-header-nav-toggle:hover{
    color:var(--homepage2-base-blue);
    border-bottom-color:var(--homepage2-base-green);
}
.homepage2-header-nav-item.is-aberto > .homepage2-header-nav-toggle{
    color:var(--homepage2-base-blue);
    border-bottom-color:var(--homepage2-base-green);
}
.homepage2-header-nav svg{
    width:12px;
    height:12px;
    opacity:0.6;
}
.homepage2-header-nav-seta{
    transition:transform 200ms ease;
}
.homepage2-header-nav-item.is-aberto > .homepage2-header-nav-toggle .homepage2-header-nav-seta{
    transform:rotate(180deg);
}
@media(min-width:1025px){
    .homepage2-header-nav-item:hover > .homepage2-header-nav-toggle .homepage2-header-nav-seta{
        transform:rotate(180deg);
    }
}

/* Cadeadinho de item restrito (2026-09-08, pedido do Luciano — menu
   dinâmico com a MESMA regra de permissão da produção, ver
   includes/menu_utils_homepage2.php). Sem cor própria de propósito,
   igual ao original em assets/css/header.css (".menu-item-cadeado")
   — herda a cor do link em qualquer um dos 2 lugares onde aparece
   (menu fixo do desktop, acordeão da gaveta). */
.homepage2-header-nav-cadeado,
.homepage2-header-gaveta-cadeado{
    font-size:.72em;
    opacity:.75;
    margin-left:4px;
}

/* =========================================================
   DROPDOWN DA BARRA SUPERIOR — painel flutuante branco (ver
   comentário completo em index.html). z-index:999 (pedido do
   Luciano) garante que fica ACIMA de qualquer coisa do hero
   (mascote/setas/balão nunca passam de z-index:4 hoje).
========================================================= */
.homepage2-header-nav-item{
    position:relative;
}
.homepage2-header-nav-dropdown{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    min-width:220px;
    background:var(--homepage2-base-bg);
    border:1px solid var(--homepage2-base-border);
    border-radius:10px;
    box-shadow:0 12px 28px rgba(4,20,32,0.18);
    padding:8px;
    z-index:999;
}
.homepage2-header-nav-item.is-aberto > .homepage2-header-nav-dropdown{
    display:block;
}
/* Hover instantâneo (pedido do Luciano — mesmo efeito do mega-menu do
   Painel Admin em produção: passar o mouse já abre, 0 segundos,
   sem precisar clicar). O clique (JS, classe "is-aberto" acima)
   continua funcionando também — importante pra quem navega por
   teclado ou toque, onde não existe ":hover" de verdade. Desativado
   abaixo de 1024px, mesmo breakpoint já usado pra essa mesma decisão
   no Painel Admin (admin/assets/css/menu_horizontal.css) — em
   telas estreitas só o clique deve abrir. */
@media(min-width:1025px){
    .homepage2-header-nav-item:hover > .homepage2-header-nav-dropdown{
        display:block;
    }
}
.homepage2-header-nav-dropdown > ul{
    /* ">" (filho direto, não qualquer <ul> descendente) é o que
       importa aqui — sem isso, esta regra também pega o
       <ul class="homepage2-header-nav-dropdown-nivel2"> do Acordo Coletivo (que
       está aninhado dentro deste dropdown) e, por ter mais
       especificidade que o "display:none" dele, deixava o submenu
       de nível 2 sempre aberto de cara (achado do Luciano). */
    list-style:none;
    margin:0;
    padding:0;
    display:block; /* sobrescreve o "display:flex" de ".homepage2-header-nav ul" —
                       aqui dentro do dropdown a lista é vertical */
}
.homepage2-header-nav-dropdown > ul > li > a{
    display:block;
    padding:10px 12px;
    border-radius:6px;
    font-size:16px;
    font-weight:600;
    color:var(--homepage2-base-text);
    text-decoration:none;
    white-space:nowrap;
}
.homepage2-header-nav-dropdown > ul > li > a:hover{
    background:#eef4f9;
    color:var(--homepage2-base-blue);
}
html.homepage2-base-dark .homepage2-header-nav-dropdown > ul > li > a:hover{
    background:#1c3358;
}

/* Nível 2 dentro do dropdown (hoje só "Acordo Coletivo", dentro de
   "Documentos") — mesmo mecanismo de acordeão da gaveta (classe
   "is-aberto" no <li>), só que dentro de um painel branco flutuante
   em vez de dentro da gaveta lateral. */
.homepage2-header-nav-item-nivel2{
    position:relative;
}
.homepage2-header-nav-toggle-nivel2{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    background:none;
    border:none;
    text-align:left;
    padding:10px 12px;
    border-radius:6px;
    font-family:inherit;
    font-size:16px;
    font-weight:600;
    color:var(--homepage2-base-text);
    cursor:pointer;
}
.homepage2-header-nav-toggle-nivel2:hover{
    background:#eef4f9;
    color:var(--homepage2-base-blue);
}
html.homepage2-base-dark .homepage2-header-nav-toggle-nivel2:hover{
    background:#1c3358;
}
.homepage2-header-nav-item-nivel2 > .homepage2-header-nav-dropdown-nivel2{
    /* Precisa ser ".homepage2-header-nav-item-nivel2 > .homepage2-header-nav-dropdown-nivel2" (e não
       só ".homepage2-header-nav-dropdown-nivel2") por causa de especificidade: a regra
       genérica ".homepage2-header-nav ul{display:flex}" (lá em cima, NAV HORIZONTAL)
       também bate nesse <ul> por ele estar dentro de ".homepage2-header-nav", e com
       apenas uma classe ".homepage2-header-nav-dropdown-nivel2{display:none}" perdia
       pra ela (0,1,0 contra 0,1,1) — o Acordo Coletivo nascia visível/
       flex por baixo dos panos, mesmo com "display:none" escrito aqui.
       Mesma família do bug do ">" no ".homepage2-header-nav-dropdown > ul" acima. */
    display:none;
    list-style:none;
    margin:4px 0 4px 12px;
    padding:4px 0 4px 10px;
    border-left:2px solid var(--homepage2-base-border);
}
.homepage2-header-nav-item-nivel2.is-aberto > .homepage2-header-nav-dropdown-nivel2{
    display:block;
}
@media(min-width:1025px){
    .homepage2-header-nav-item-nivel2:hover > .homepage2-header-nav-dropdown-nivel2{
        display:block;
    }
}
.homepage2-header-nav-dropdown-nivel2 > li > a{
    display:block;
    padding:8px 10px;
    border-radius:6px;
    font-size:16px;
    font-weight:500;
    color:var(--homepage2-base-text-soft);
    text-decoration:none;
    white-space:nowrap;
}
.homepage2-header-nav-dropdown-nivel2 > li > a:hover{
    background:#eef4f9;
    color:var(--homepage2-base-blue);
}
html.homepage2-base-dark .homepage2-header-nav-dropdown-nivel2 > li > a:hover{
    background:#1c3358;
}

/* =========================================================
   GAVETA LATERAL (placeholder — só a casca por enquanto)
========================================================= */
.homepage2-header-gaveta-overlay{
    position:fixed;
    inset:0;
    background:rgba(8,44,68,0.55);
    opacity:0;
    pointer-events:none;
    transition:opacity 200ms ease;
    z-index:900;
}
.homepage2-header-gaveta{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:320px;
    max-width:85vw;
    background:var(--homepage2-base-bg);
    transform:translateX(-100%);
    transition:transform 250ms ease;
    z-index:901;
    padding:48px 24px 16px; /* 2026-10-20: topo reservado pro "Fechar" no canto direito; menos espaço embaixo pra caber tudo na tela */
    box-shadow:12px 0 30px rgba(0,0,0,0.2);
    overflow-y:auto;
    overscroll-behavior:contain;
}
@supports (height:100dvh){
    .homepage2-header-gaveta{ height:100dvh; }
}
body.homepage2-header-gaveta-aberta .homepage2-header-gaveta-overlay{
    opacity:1;
    pointer-events:auto;
}
body.homepage2-header-gaveta-aberta .homepage2-header-gaveta{
    transform:translateX(0);
}
.homepage2-header-gaveta-fechar{
    background:none;
    border:none;
    cursor:pointer;
    font-size:16px;
    font-weight:700;
    color:var(--homepage2-base-navy);
    display:flex;
    align-items:center;
    gap:8px;
    position:absolute;
    top:8px;
    right:12px;
    padding:8px;
    margin:0;
}
html.homepage2-base-dark .homepage2-header-gaveta-fechar{
    color:var(--homepage2-base-text);
}

/* Logo no topo da gaveta (2026-10-06, pedido do Enockes/Luciano) —
   grande e centralizada, com respiro e uma linha fina separando do
   menu abaixo. Mesmo filtro de dark mode já usado na logo do header
   principal (.homepage2-header-logo img). */
.homepage2-header-gaveta-logo{
    display:flex;
    justify-content:center;
    padding-bottom:12px;
    margin-bottom:4px;
    border-bottom:1px solid var(--homepage2-base-border);
}
.homepage2-header-gaveta-logo img{
    /* 2026-10-06 (Luciano: "pedi GRANDE, ficou pequeno") — subiu de
       70%/220px pra 88%/260px, e trocou pra logo-staecnon-3.png
       (proporção mais quadrada, sem a tarja "94 anos" do header
       principal), que já rende bem mais alta nesse mesmo espaço. */
    width:80%;
    max-width:220px;
    height:auto;
    display:block;
}
html.homepage2-base-dark .homepage2-header-gaveta-logo img{
    filter:brightness(0) invert(1);
}
.homepage2-header-gaveta p{
    font-size:16px;
    color:var(--homepage2-base-text-soft);
    line-height:1.6;
}

/* =========================================================
   GAVETA LATERAL — conteúdo real do menu (branco, ver comentário
   completo em index.html). Painel inteiro rola por dentro
   (.homepage2-header-gaveta já tem altura 100%) se a árvore toda não couber na
   tela — sem precisar de nenhum CSS extra aqui pra isso.
========================================================= */
.homepage2-header-gaveta-menu{
    margin:0 -24px; /* volta o respiro de 24px do .homepage2-header-gaveta (padding)
                        pra dentro de cada link, então a área clicável
                        de cada item vai de borda a borda do painel */
}
.homepage2-header-gaveta-menu > ul{
    list-style:none;
    margin:0;
    padding:0;
}
.homepage2-header-gaveta-item{
    border-bottom:1px solid var(--homepage2-base-border);
}
.homepage2-header-gaveta-toggle,
.homepage2-header-gaveta-link-simples{
    width:100%;
    display:flex;
    align-items:center;
    gap:12px;
    background:none;
    border:none;
    text-align:left;
    text-decoration:none;
    cursor:pointer;
    padding:12px 24px;
    font-family:inherit;
    font-size:16px;
    font-weight:700;
    color:var(--homepage2-base-navy);
}
html.homepage2-base-dark .homepage2-header-gaveta-toggle,
html.homepage2-base-dark .homepage2-header-gaveta-link-simples{
    color:var(--homepage2-base-text);
}
.homepage2-header-gaveta-toggle i:first-child,
.homepage2-header-gaveta-link-simples i:first-child{
    width:18px;
    text-align:center;
    color:var(--homepage2-base-blue);
    font-size:15px;
    flex-shrink:0;
}
.homepage2-header-gaveta-toggle span,
.homepage2-header-gaveta-link-simples span{
    flex:1;
}
.homepage2-header-gaveta-seta{
    font-size:12px;
    color:var(--homepage2-base-text-soft);
    transition:transform 200ms ease;
    flex-shrink:0;
}
.homepage2-header-gaveta-item.is-aberto > .homepage2-header-gaveta-toggle .homepage2-header-gaveta-seta{
    transform:rotate(180deg);
}
.homepage2-header-gaveta-toggle:hover,
.homepage2-header-gaveta-link-simples:hover{
    color:var(--homepage2-base-blue);
}

/* Submenu: escondido por padrão (max-height:0 em vez de display:none,
   pra poder animar a abertura), revelado via classe "is-aberto" no
   <li> pai (clique — ver assets/js/header.js). */
.homepage2-header-gaveta-submenu{
    list-style:none;
    margin:0;
    padding:0;
    max-height:0;
    overflow:hidden;
    background:#f7f9fb;
    transition:max-height 250ms ease;
}
.homepage2-header-gaveta-item.is-aberto > .homepage2-header-gaveta-submenu{
    max-height:1000px; /* alto o bastante pra nunca cortar o maior
                           submenu (Acordo Coletivo, 9 itens) */
}
.homepage2-header-gaveta-submenu > li > a{
    display:block;
    padding:12px 24px 12px 54px; /* recuo alinhado ao texto do item pai
                                     (ícone 18px + gap 12px + padding
                                     24px do pai) */
    font-size:16px;
    font-weight:600;
    color:var(--homepage2-base-text);
    text-decoration:none;
    border-left:3px solid var(--homepage2-base-border);
}
.homepage2-header-gaveta-submenu > li > a:hover{
    color:var(--homepage2-base-blue);
    border-left-color:var(--homepage2-base-blue);
    background:#eef4f9;
}

/* Nível 2 (neto — hoje só "Acordo Coletivo" dentro de "Documentos"):
   mesmo mecanismo do nível 1 (max-height + classe is-aberto no <li>),
   um degrau mais fundo, borda mais discreta pra não competir com a do
   pai. Fonte continua 16px — regra permanente do projeto, nenhum
   nível deve ficar menor que isso. */
.homepage2-header-gaveta-item-nivel2{
    border-bottom:none;
}
.homepage2-header-gaveta-toggle-nivel2{
    padding:12px 24px 12px 54px;
    font-size:16px;
    font-weight:600;
    color:var(--homepage2-base-text);
}
.homepage2-header-gaveta-submenu-nivel2{
    background:#eef2f6;
}
.homepage2-header-gaveta-submenu-nivel2 > li > a{
    padding-left:78px;
    font-weight:500;
    border-left:2px solid var(--homepage2-base-border);
}
.homepage2-header-gaveta-submenu-nivel2 > li > a:hover{
    border-left-color:var(--homepage2-base-blue);
}
/* Modo escuro: os 3 tons de fundo do submenu (nível 1/hover/nível 2)
   eram hex fixo pensado só pro claro — sem isso o menu inteiro
   escurece (var(--homepage2-base-bg)) mas o submenu continuava com fundo
   claro, texto sumindo. */
html.homepage2-base-dark .homepage2-header-gaveta-submenu{
    background:#152645;
}
html.homepage2-base-dark .homepage2-header-gaveta-submenu > li > a:hover{
    background:#1c3358;
}
html.homepage2-base-dark .homepage2-header-gaveta-submenu-nivel2{
    background:#0d1c34;
}

/* Redes sociais no final da gaveta (2026-10-06, mesmo pedido acima) —
   ícones centralizados, mesma cor/peso visual dos ícones de item do
   menu (var(--homepage2-base-blue)). Margem lateral negativa (-24px)
   pelo mesmo motivo do .homepage2-header-gaveta-menu: devolve o
   respiro de 24px do painel pra dentro do bloco. */
.homepage2-header-gaveta-social{
    margin:0 -24px;
    padding:14px 24px 0;
    text-align:center;
}
.homepage2-header-gaveta-social-titulo{
    display:block;
    font-size:13px;
    font-weight:700;
    letter-spacing:0.5px;
    text-transform:uppercase;
    color:var(--homepage2-base-text-soft);
    margin-bottom:8px;
}
html.homepage2-base-dark .homepage2-header-gaveta-social-titulo{
    color:var(--homepage2-base-text);
}
.homepage2-header-gaveta-social-icones{
    display:flex;
    justify-content:center;
    gap:36px;
}
.homepage2-header-gaveta-social-icones a{
    color:var(--homepage2-base-blue);
    font-size:30px; /* era 22px — aumentado (pedido do Luciano, 2026-10-06); 34px→30px em 2026-10-20 pra caber na tela */
}
.homepage2-header-gaveta-social-icones a:hover{
    opacity:0.75;
}

/* =========================================================
   AVISO DE PROTÓTIPO
========================================================= */
.homepage2-base-aviso-prototipo{
    background:#fff3cd;
    border-bottom:1px solid #ffe08a;
    color:#7a5b00;
    font-size:16px;
    text-align:center;
    padding:10px 16px;
}

.homepage2-base-placeholder-resto{
    max-width:1200px;
    margin:60px auto;
    padding-inline:20px;
    text-align:center;
    color:var(--homepage2-base-text-soft);
    font-size:16px;
    line-height:1.7;
}

/* =========================================================
   RESPONSIVO — enxuto por enquanto (foco desktop 1360×768)
========================================================= */
@media(max-width:991px){
    .homepage2-header-nav ul{
        gap:20px;
        overflow-x:auto;
    }
}
@media(max-width:700px){
    .homepage2-header-mainheader-right .homepage2-header-mainheader-associese span{
        display:none;
    }
    .homepage2-header-mainheader-right .homepage2-header-mainheader-associese{
        padding:10px 12px;
    }
    .homepage2-header-logo img{
        height:44px; /* 40px + 10% */
    }
    .homepage2-header-logo-tagline{
        font-size:16px; /* nunca abaixo de 16px, regra permanente do projeto */
    }
}

/* =========================================================
   HERO
   prototipo-nova-home/assets/css/homepage2-header.css (seção HERO)
   -----------------------------------------------------------
   Título em 2 cores (azul + verde), uma linha cada. Floriano
   estático, maior que a altura da própria seção de propósito
   (ultrapassa por baixo, como na proposta 04) — por isso o fundo
   tem seu PRÓPRIO wrapper com overflow:hidden (.homepage2-hero-bg-wrap),
   em vez do corte ficar na seção inteira: só a foto de fundo é
   cortada nas bordas do Hero, o Floriano não.

   SLIDER (teste) — duas camadas independentes, cada uma anda
   por conta própria:
   1) .homepage2-hero-viewport > .homepage2-hero-track > .homepage2-hero-slide(s): o
      fundo + o texto (título/legenda/botões) de cada slide.
      Desliza na horizontal (transform:translateX no .homepage2-hero-track),
      como um carrossel comum — é a esteira mesmo que "anda".
   2) .homepage2-hero-mascotes: mora FORA da esteira, sempre no mesmo
      lugar físico (canto direito). Cada mascote é uma imagem
      empilhada por cima da outra (.homepage2-hero-mascote-wrap), e só
      a opacidade troca — ele dissolve/aparece no mesmo lugar,
      nunca desliza junto com o fundo.
   A altura do .homepage2-hero é 100% natural (não tem número mágico
   fixo) — vem do conteúdo do slide mais alto dentro da esteira,
   graças ao align-items:stretch padrão do flex. Isso é o que
   evita sobrar espaço vazio embaixo do Floriano.
   Tudo isso é controlado por assets/js/hero-slider.js.
========================================================= */

.homepage2-hero{
    position:relative;
    background:var(--homepage2-base-navy);
    /* SEM overflow:hidden aqui — só o .homepage2-hero-bg-wrap (dentro de
       cada slide) corta a foto de fundo. Se um dia colocar
       overflow:hidden neste seletor achando que vai "conter" a
       altura do slider, vai cortar o capacete do Floriano nas
       pontas — não fazer isso. */
}

.homepage2-hero-viewport{
    position:relative;
    overflow:hidden;
}
.homepage2-hero-track{
    position:relative;
    display:flex;
    align-items:stretch;
    transition:transform 700ms ease;
}
.homepage2-hero-slide{
    position:relative;
    flex:0 0 auto;
    /* largura de cada slide e largura total da esteira são setadas
       via JS (inline style), porque dependem de quantos slides
       existem — CSS puro com flex-basis:% aqui não é confiável
       quando o container (.homepage2-hero-track) não tem largura própria. */
}
.homepage2-hero-bg-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
    z-index:0;
}
/* Scrim: degradê escuro por cima da foto, só do lado do texto (esquerda),
   esmaecendo até ficar transparente perto do mascote. Não é uma camada
   HTML própria — é um pseudo-elemento do próprio wrap do fundo, então
   repete sozinho em TODOS os slides sem precisar tocar no HTML. Existe
   porque uma foto "ocupada" (como a da quadra ou da assembleia) mata a
   legibilidade de um texto escuro — daí o texto do hero também virou
   branco (ver .homepage2-hero-titulo / .homepage2-hero-subtexto mais abaixo). */
.homepage2-hero-bg-wrap::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,
        rgba(4,20,32,0.80) 0%,
        rgba(4,20,32,0.62) 28%,
        rgba(4,20,32,0.30) 52%,
        rgba(4,20,32,0) 78%
    );
    pointer-events:none;
}
.homepage2-hero-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
.homepage2-hero .homepage2-base-container{
    position:relative;
    z-index:1;
    display:flex;
    align-items:flex-start;
    min-height:520px;
    padding-top:64px;
}

.homepage2-hero-texto{
    max-width:640px;
    padding-bottom:56px;
}
/* Texto claro (era navy/verde escuro) porque nem toda foto de fundo
   tem uma área clara própria pro texto descansar — o scrim escuro
   (.homepage2-hero-bg-wrap::after, ver acima) garante o contraste em
   qualquer uma das 4 fotos.
   Cor: o título inteiro é verde-claro por padrão, e só 1-2 palavras
   estratégicas (.homepage2-hero-destaque) ficam brancas pra chamar atenção —
   não é mais "uma cor por linha", é "destaque pontual dentro do
   texto corrido". Por isso não tem mais .linha-azul/.linha-verde
   nem span{display:block} aqui: o título agora é texto contínuo,
   quebrando a linha sozinho onde couber (só o slide 3 força uma
   quebra específica com <br>, direto no HTML). */
.homepage2-hero-titulo{
    margin:0 0 18px;
    font-family:var(--homepage2-base-font-titulo);
    font-size:41px;
    line-height:1.22;
    font-weight:800;
    /* 2026-09-11 (pedido do Luciano): tracking removido — a fonte de
       título (Fira Sans Condensed) fica sem letter-spacing em NENHUM
       título do site agora, pra todos os títulos usarem a mesma
       "voz" (comparar com homepage2-destaques.css e
       homepage2-parceiros.css, ajustados na mesma rodada). */
    letter-spacing:normal;
    text-transform:uppercase;
    text-shadow:0 2px 10px rgba(0,0,0,0.35);
    color:#ffffff; /* título todo branco em todas as telas (pedido do Luciano, 2026-10-20); o azul sumia no fundo escurecido */ /* era #8fe3a3 (verde claro) — 2026-09-11, pedido do Luciano: azul-claro novo da logo */
}
.homepage2-hero-titulo .homepage2-hero-destaque{
    color:#ffffff;
}
.homepage2-hero-cartao{
    background:none;
    box-shadow:none;
    border-radius:0;
    padding:0;
}
.homepage2-hero-subtexto{
    margin:0 0 24px;
    font-size:18px;
    line-height:1.6;
    font-weight:700;
    color:#ffffff;
    text-shadow:0 1px 6px rgba(0,0,0,0.35);
    max-width:520px;
}
.homepage2-hero-ctas{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}
.homepage2-hero-btn-navy{
    /* Cores fixas (não var(--homepage2-base-navy)/var(--homepage2-base-blue)) — o Hero é
       território à parte, fora das mudanças do dark mode (pedido do
       Luciano). No dark mode essas variáveis viram tons pensados pra
       cima de fundo escuro, e aqui o botão sempre foi/continua igual
       nas duas cores originais do Hero.
       2026-09-11 (pedido do Luciano): testando o verde novo da logo
       (#00CF37) nesses 4 botões do Hero ("Conheça o Staecnon", "Conheça
       a quadra", "Participe das assembleias", "Conheça o benefício").
       O #00CF37 PURO não entrou direto no fundo do botão — com texto
       branco em cima, o contraste dele é só 2.1:1 (WCAG exige 4.5:1
       pra texto normal), igual aconteceu antes com o azul-claro puro
       da logo (#01BAFA) nos botões "Associe-se". Mesma solução:
       #007A20 é o MESMO tom de verde (matiz idêntico ao #00CF37),
       só mais escuro pra ficar legível — contraste 5,5:1, passa WCAG AA. */
    background:#007A20;
    color:#ffffff;
    font-weight:700;
    font-size:16px;
    line-height:1;
    padding:16px 22px;
    border-radius:10px;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    gap:8px;
}
.homepage2-hero-btn-navy:hover{
    background:#006A1C; /* mesmo matiz, ainda mais escuro (contraste 6,8:1) pra
        contrastar com o fundo normal do botão */
}
/* .homepage2-hero-btn-navy e .homepage2-base-btn-associado (dentro do hero) já tinham o MESMO
   padding/font-size — no papel deviam sair com a mesma altura. Pedido
   do Luciano (achou o "Associe-se" mais alto): travei line-height:1
   nos dois, explícito, em vez de confiar no line-height "normal"
   (varia um pouco por navegador/fonte e é a explicação mais provável
   pro 1-2px de diferença que ele via) — agora a altura dos dois é
   calculada do mesmo jeito, sem depender de métrica implícita da
   fonte. */
.homepage2-hero-ctas .homepage2-base-btn-associado{
    border-radius:10px;
    padding:16px 22px;
    line-height:1;
    display:inline-flex;
    align-items:center;
    gap:8px;
    /* 2026-09-11 (pedido do Luciano, print temp/247.jpg): só o "Associe-se"
       DENTRO do Hero usa essa dupla mais vívida (#01BAFA / #017198 no
       hover) — os outros "Associe-se"/"Acesse os informes"/"Ver todas
       as dúvidas" espalhados pelo site continuam na dupla um pouco mais
       "fechada" (var(--homepage2-base-green)/-dark), sem mudar. */
    background:#01BAFA;
}
.homepage2-hero-ctas .homepage2-base-btn-associado:hover{
    background:#017198;
}


/* Camada do(s) mascote(s) — fora da esteira, sobrepondo tudo (z-index
   alto), alinhada ao mesmo container de 1200px do resto do conteúdo
   pra ficar no canto direito certo. pointer-events:none nela mesma
   (senão bloquearia clique nas setas/botões), mas cada mascote em si
   também não precisa ser clicável. */
.homepage2-hero-mascotes{
    /* Não usa a classe .homepage2-base-container aqui de propósito — herdar
       .homepage2-base-container junto de .homepage2-hero-mascotes já causou um bug real
       (a regra ".homepage2-hero .homepage2-base-container" tem mais especificidade e
       vencia o position:absolute daqui, fazendo esse bloco voltar
       pro fluxo normal e "empurrar" ~520px de espaço vazio embaixo
       do hero). Por isso repete aqui os mesmos valores de largura/
       centralização do .homepage2-base-container à mão, sem usar a classe. */
    position:absolute;
    inset:0;
    width:100%;
    max-width:var(--homepage2-base-container-max);
    margin-inline:auto;
    padding-inline:var(--homepage2-base-container-padding);
    z-index:3;
    pointer-events:none;
}
@media(min-width:1240px){
    .homepage2-hero-mascotes{
        padding-inline:0;
    }
}
.homepage2-hero-mascote-wrap{
    position:absolute;
    /* -30px em vez de 20px = todos os mascotes 50px mais pra direita,
       pra cabeça não encostar mais nos links do menu (pedido do
       Luciano). Como é uma regra ÚNICA compartilhada por todos os
       .homepage2-hero-mascote-wrap, muda aqui já vale pra todos — eles nunca
       "dançam" de posição entre si. */
    right:-30px;
    bottom:0;
    /* Reduzido de +140px pra +70px (pedido do Luciano, print temp/230.jpg)
       — com a Prece de volta pro header (logo acima do Hero), o estouro
       de 140px fazia cabelo/capacete invadirem o banner. Combinado com
       o max-height menor em .homepage2-hero-floriano logo abaixo, o
       mascote fica visivelmente menor (perde um pouco do efeito de
       "quebrar o quadro" que o Luciano gostava, mas evita atropelar a
       Prece). */
    height:calc(100% + 70px);
    display:flex;
    align-items:flex-end;
    opacity:0;
    visibility:hidden;
    transition:opacity 600ms ease;
}
.homepage2-hero-mascote-wrap.is-active{
    opacity:1;
    visibility:visible;
}
.homepage2-hero-floriano{
    height:100%;
    width:auto; /* o <img> leva width/height reais; a largura segue a altura */
    /* Reduzido de 760px pra 660px (pedido do Luciano, print temp/230.jpg)
       — mascote menor pra não atrapalhar o banner da Prece logo acima.
       Reduzido de novo, de 660px pra 580px (2026-09-11, pedido do
       Luciano, print temp/245.jpg) — mascote ainda estourava ~140px
       acima do topo do Hero (medido ao vivo no navegador: altura do
       Hero 520px, mascote batendo no max-height de 660px), invadindo
       demais o banner da Prece logo acima. Corte de 80px reduz o
       estouro pra ~60px (mais da metade da faixa vermelha marcada no
       print) mantendo a cabeça ainda pra fora do Hero, como pedido.
       Regra ÚNICA compartilhada por TODOS os mascotes (Floriano, Gabi,
       Josemar, Aposentado usam esta mesma classe) — mudar aqui vale
       pra todos automaticamente, não só o Floriano. */
    max-height:580px;
    width:auto;
    display:block;
    position:relative;
}

/* MOCKUP: balão de fala do mascote — exemplo pra avaliacao. Aplicado
   no slide 1 (Floriano) e no slide 3 (Josemar), mesma classe/CSS pra
   ambos, só o texto do <p> muda por slide. Print temp/205.jpg
   pediu sair do lado esquerdo (pill) pra um balão retangular do lado
   DIREITO da cabeça. Print temp/206.jpg (rodada seguinte) pediu descer
   mais — sentar sobre o fundo (céu) vazio à direita do mascote, em vez
   de sobrepor capacete/rosto — e ficar bem mais VERTICAL que
   horizontal (sugestão do próprio Luciano: forçar quebra de linha
   curta com <br> em vez de deixar o texto fluir largo). Ancorado com
   `right` (não `left`) dentro do .homepage2-hero-mascote-wrap, pra manter a
   borda direita do balão sempre colada perto da borda direita do
   mascote/wrap, não importa a largura renderizada da imagem — só a
   largura pequena (`width`) + as quebras de linha no HTML é que
   "empurram" o balão pra virar vertical. Setinha triangular continua
   no lado ESQUERDO do balão, agora mais perto do topo, apontando de
   volta pro rosto/orelha do personagem. */
.homepage2-hero-chip{
    /* Balão sempre branco, texto sempre navy fixo — mesmo motivo do
       ".homepage2-hero-btn-navy" e do ".homepage2-hero-chip-nome" acima: Hero fora do
       dark mode. */
    position:absolute;
    top:calc(26% - 85px + var(--dy,0px));
    /* -26px -> -46px (2026-09-11, pedido do Luciano, print temp/246.jpg)
       — a ponta da setinha (chip::after, left:-13px em relação ao
       balão) estava caindo em cima do cabelo/orelha do Floriano. Balão
       inteiro (e a ponta junto, já que ela é relativa ao próprio chip)
       deslocado 20px pra direita, só o Floriano — os outros mascotes
       (Josemar/Aposentado/Gabi) têm `right` próprio em
       .homepage2-hero-chip--* e não são afetados por esta regra base. */
    right:calc(-46px + var(--dx,0px));
    width:170px;
    background:#ffffff;
    color:#082c44;
    font-family:var(--homepage2-base-font-corpo, inherit);
    font-size:21px;
    font-weight:700;
    line-height:1.4;
    text-align:center;
    padding:22px 18px;
    border-radius:22px;
    box-shadow:0 10px 24px rgba(4,20,32,0.5);
    z-index:2;
}
.homepage2-hero-chip-nome{
    /* Cor fixa, NÃO usa var(--homepage2-base-blue): o balão do Hero é sempre
       branco (não muda com o tema), mas --homepage2-base-blue no dark mode fica
       mais claro (pensado pra texto sobre fundo escuro) — aqui
       deixaria o azul do nome com tom errado (achado do Luciano). O
       Hero é território à parte, fora das mudanças do dark mode. */
    color:#0B6AA2;
}
.homepage2-hero-chip::after{
    /* setinha triangular no lado esquerdo do balão, centralizada na
       vertical (top:50% + translateY, em vez de valor fixo em px, pra
       continuar centralizada mesmo se a altura do balão mudar de novo
       com o texto), apontando de volta pro rosto do Floriano */
    content:"";
    position:absolute;
    left:-13px;
    top:50%;
    transform:translateY(-50%);
    width:0;
    height:0;
    border-style:solid;
    border-width:9px 15px 9px 0;
    border-color:transparent #ffffff transparent transparent;
}
/* Posição do balão: vem do Painel Admin, por slide, em variáveis inline no
   <p> (--dx = px para o centro, --dy = px para baixo, usadas acima; no
   tablet --tab-x / --tab-y em %, ver bloco do tablet). Balão do lado
   esquerdo do personagem: classe --esq (âncora pela esquerda, setinha
   virada). Nada é fixo por mascote. */
.homepage2-hero-chip--esq{
    right:auto;
    left:calc(-20px + var(--dx,0px));
}
.homepage2-hero-chip--esq::after{
    left:auto;
    right:-13px;
    border-width:9px 0 9px 15px;
    border-color:transparent transparent transparent #ffffff;
}
@media(max-width:991px){
    .homepage2-hero-chip{
        display:none;
    }
}

/* Controles do slider (todas as telas, padrão único — pedido do Luciano,
   2026-10-20): bolinhas centralizadas a 24px do fundo; setas "<" e ">"
   uma de cada lado, na mesma linha. Meia largura das bolinhas = 32px
   (4x10 + 3x8 = 64px); setas de 26px a 16px de distância:
   50% - 32 - 16 - 26 = 50% - 74px. bottom 16px nas setas = 24px das
   bolinhas + 5px (meia bolinha) - 13px (meia seta), pra os centros
   alinharem. Setas quase brancas (90%) com ícone azul grosso: contraste
   alto contra qualquer fundo de slide (print temp/217.jpg). */
.homepage2-hero-controles{
    position:absolute;
    left:0;
    right:0;
    bottom:16px; /* centro dos controles a 29px do fundo (bolinha a 24px + meia bolinha) */
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    pointer-events:none; /* só os botões em si recebem clique */
}
.homepage2-hero-controles > *{
    pointer-events:auto;
}
.homepage2-hero-seta{
    flex:0 0 auto;
    width:26px;
    height:26px;
    border-radius:999px;
    border:none;
    background:rgba(255,255,255,0.9);
    color:var(--homepage2-base-blue);
    font-size:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 12px rgba(4,20,32,0.25);
    transition:background 150ms ease;
}
.homepage2-hero-seta i{
    -webkit-text-stroke:1.6px currentColor; /* ícone mais grosso */
}
.homepage2-hero-seta:hover{
    background:#ffffff;
}

/* Bolinhas de navegação manual (uma por slide, criadas pelo JS) */
.homepage2-hero-slider-dots{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0;
    max-width:60vw;
}
.homepage2-hero-slider-dots button{
    /* 2026-10-20 (PageSpeed/acessibilidade): área de toque de 24px; a
       bolinha continua visualmente com 10px (desenhada pelo gradiente). */
    width:24px;
    height:24px;
    border-radius:999px;
    border:none;
    padding:0;
    background:radial-gradient(circle, rgba(255,255,255,0.5) 0 5px, transparent 5.5px);
    cursor:pointer;
    transition:background 150ms ease, transform 150ms ease;
}
.homepage2-hero-slider-dots button.is-active{
    background:radial-gradient(circle, #ffffff 0 5px, transparent 5.5px);
    transform:scale(1.2);
}


@media(max-width:991px){
    /* Mobile: sem esteira deslizante (troca de slide por display:none/block).
       O layout do conteúdo de cada slide está em "HERO NO CELULAR" no fim
       deste arquivo. */
    .homepage2-hero-track{
        display:block;
        width:100% !important; /* 2026-10-08: o JS do slider põe width inline de N telas — no mobile a esteira é uma tela só */
        transform:none !important;
        transition:none;
    }
    .homepage2-hero-slide{
        width:100% !important;
        display:none;
    }
    .homepage2-hero-slide.is-active-mobile{
        display:block;
    }
}

/* Botão DENÚNCIA (destaque no topbar, antes dos telefones) */
.homepage2-header-topbar-denuncia-destaque{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:#d61212; /* era #ee1616 — 2026-10-20 contraste (PageSpeed) */
    color:#ffffff !important;
    padding:8px 14px; /* era 5px 12px — 2026-09-11 (pedido do Luciano): botão
        estava "magrinho" demais, aumentada a altura */
    border-radius:10px; /* era 999px (pílula) — 2026-09-11 (pedido do Luciano):
        padrão novo é o pouco arredondado do botão "Associe-se" do Hero */
    font-weight:600;
    font-size:14px;
    line-height:1.2;
    position:relative;
    animation:homepage2-header-denuncia-pulso 2.8s ease-out infinite, homepage2-header-denuncia-respiro 2.8s ease-out infinite;
}
.homepage2-header-topbar-denuncia-destaque i{
    font-size:13px;
}
.homepage2-header-topbar-denuncia-destaque:hover{
    background:#b32e2e;
    animation-play-state:paused;
}

/* Botão "Associe-se" da topbar REMOVIDO em 2026-09-12 (pedido do
   Luciano) — ficou redundante depois do convite equivalente no header
   principal (.homepage2-header-mainheader-associese, ver acima),
   que já chama atenção sozinho com efeitos em loop. Regra antiga
   (.homepage2-header-topbar-filiese-destaque) removida por não ter
   mais nenhum uso no projeto. */

@keyframes homepage2-header-denuncia-pulso{
    0%{ box-shadow:0 0 0 0 rgba(238,22,22,0.85); }
    100%{ box-shadow:0 0 0 20px rgba(238,22,22,0); }
}
@keyframes homepage2-header-denuncia-respiro{
    0%{ transform:scale(1); }
    50%{ transform:scale(1.08); }
    100%{ transform:scale(1); }
}

@media (prefers-reduced-motion: reduce){
    .homepage2-header-topbar-denuncia-destaque{
        animation:none;
    }
}

/* =========================================================
   INFORME DO HEADER (2026-09-12, portado de assets/css/header.css —
   pedido do Luciano: padronizar todas as páginas no header novo sem
   perder a funcionalidade do informe/banner rotativo administrável.
   Classes SEM prefixo "homepage2-" de propósito — é o MESMO
   componente compartilhado com includes/header.php, só que agora
   também usado aqui. Fallback nos var() porque nem toda página que
   usa este header (ex: index.php) carrega base.css/design-system.css.
========================================================= */

.header-informe{
    /* 2026-09-12 (pedido do Luciano): 20px de espaço acima do banner
       e 30px abaixo. */
    margin-top:20px;
    margin-bottom:30px;
    padding-top:0;
    padding-bottom:0;
    background:var(--homepage2-base-bg, #fff);
}

.header-informe img{
    width:100%;
    height:auto; /* o <img> agora leva width/height reais (evita pulo de layout) */
    border-radius:10px;
    display:block;
}

.header-informe-rotativo{
    position:relative;
    transform-origin:center;
    animation:header-informe-chacoalhar 10s ease-in-out infinite;
}

.header-informe-rotativo:hover{
    animation-play-state:paused;
}

@keyframes header-informe-chacoalhar{
    0%, 100%{ transform:rotate(0deg); }
    0.5%{ transform:rotate(-2deg); }
    1%{ transform:rotate(2deg); }
    1.5%{ transform:rotate(-2deg); }
    2%{ transform:rotate(2deg); }
    2.5%{ transform:rotate(-2deg); }
    3%{ transform:rotate(0deg); }
}

@media(prefers-reduced-motion:reduce){
    .header-informe-rotativo{
        animation:none;
    }
}

.header-informe-slide{
    display:none;
}

.header-informe-slide.is-ativo{
    display:block;
}

.header-informe-variant-mobile{
    display:none;
}

@media(max-width:768px){

    .header-informe-variant-desktop{
        display:none;
    }

    .header-informe-variant-mobile{
        display:block;
    }

}

/* =========================================================
   BUSCA NO SITE (2026-09-12, refeita — pedido do Luciano, print
   temp/253.jpg) — a versão anterior aqui era um POPUP flutuante
   (".header-search"/".search-form", herdado de includes/header.php)
   que já causou MUITOS problemas de posicionamento (mobile, sidebar)
   ao longo do projeto. Trocado pela solução do Stieen: a lupa só
   abre/fecha uma FAIXA (".homepage2-header-busca-bar") no FLUXO
   NORMAL da página, logo abaixo do header inteiro (full-width, fora
   do container de 1200px, igual o resto do header) — sem
   position:absolute/fixed, então funciona igual em qualquer largura
   sem cálculo nenhum de JS (ver assets/js/homepage2-busca.js).
   Fallback nos var() porque nem toda página que usa este header
   carrega base.css/design-system.css.
========================================================= */

.homepage2-header-busca-bar{
    /* 2026-09-12 (pedido do Luciano — correção do print temp/255.jpg,
       a tentativa anterior tinha removido a linha ERRADA): a linha
       "nova"/indesejada não era a que fica logo ACIMA do menu (essa é
       antiga, sempre existiu — border-bottom de .homepage2-header-mainheader,
       normalmente colada direto em cima do <nav> — e o Luciano quer ela
       de volta ali). A linha extra de verdade é a do PRÓPRIO
       .homepage2-header-mainheader aparecendo ACIMA da barra de busca
       quando ela abre (só existe porque a barra entrou no meio do
       caminho, empurrando essa borda pra cima do campo de busca em vez
       de ficar em cima do menu). Corrigido com margin-top:-1px: a barra
       sobe 1px e cobre essa borda com o próprio fundo dela (mesma cor),
       escondendo-a — e o border-bottom AQUI (restaurado) volta a ser A
       linha que fica logo acima do menu, exatamente como antes de existir
       a busca. */
    display:none;
    margin-top:-1px;
    background:var(--homepage2-base-bg, #fff);
    border-bottom:1px solid var(--homepage2-base-border, #e4e8ee);
    box-shadow:0 12px 24px rgba(0,0,0,.08);
}

.homepage2-header-busca-bar.is-aberta{
    display:block;
}

.homepage2-header-busca-bar-inner{
    padding-block:16px;
    display:flex;
    align-items:flex-start;
    gap:10px;
}

.homepage2-header-busca-bar-inner form{
    display:flex;
    align-items:flex-start;
    gap:10px;
    width:100%;
}

.homepage2-header-busca-bar-campo{
    position:relative;
    flex:1;
}

.homepage2-header-busca-bar-campo input{
    width:100%;
    border:1px solid var(--homepage2-base-border, #d8d8d8);
    border-radius:8px;
    padding:12px 14px;
    font-size:16px;
    font-family:inherit;
    color:var(--homepage2-base-text, #1f2937);
    background:var(--homepage2-base-bg, #fff);
    outline:none;
}

.homepage2-header-busca-bar-campo input:focus{
    border-color:var(--homepage2-base-blue, #0B6AA2);
}

.homepage2-header-busca-bar-inner button[type="submit"]{
    flex-shrink:0;
    border:none;
    padding:12px 18px;
    min-width:90px;
    border-radius:8px;
    background:var(--homepage2-base-blue, #0B6AA2);
    color:#ffffff;
    cursor:pointer;
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    transition:background .2s ease;
}

.homepage2-header-busca-bar-inner button[type="submit"]:hover{
    background:var(--homepage2-base-green, #017198);
}

/* Sugestões — agora ancoradas no próprio campo (position:relative
   acima), não mais calculadas via JS (offsetTop/getBoundingClientRect
   como o popup antigo precisava pra não estourar em mobile/sidebar). */
.homepage2-header-busca-sugestoes{
    display:none;
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    max-height:320px;
    overflow-y:auto;
    background:var(--homepage2-base-bg, #fff);
    border-radius:8px;
    box-shadow:0 12px 30px rgba(0,0,0,.16);
    z-index:20;
}

.homepage2-header-busca-sugestoes.is-visivel{
    display:block;
}

.homepage2-header-busca-sugestoes-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:11px 16px;
    color:var(--homepage2-base-text, #1f2937);
    font-size:14px;
    cursor:pointer;
    border-bottom:1px solid var(--homepage2-base-border, #f1f1f1);
}

.homepage2-header-busca-sugestoes-item:last-child{
    border-bottom:none;
}

.homepage2-header-busca-sugestoes-item:hover{
    background:rgba(11,106,162,.08);
}

.homepage2-header-busca-sugestoes-item span:last-child{
    flex-shrink:0;
    color:var(--homepage2-base-text-soft, #6b7280);
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

@media(max-width:600px){
    .homepage2-header-busca-bar-inner form{
        flex-direction:column;
        align-items:stretch;
    }
    .homepage2-header-busca-bar-inner input[type="search"],
    .homepage2-header-busca-bar-inner input[type="text"]{
        width:100%;
        box-sizing:border-box;
    }
    .homepage2-header-busca-bar-inner button[type="submit"]{
        width:100%;
    }
}

/* =========================================================
   MOBILE / TABLET (2026-10-08, pedido do Luciano, print temp/325.jpg —
   o menu horizontal de desktop aparecia no celular junto com o botão
   MENU, e o logo/slogan estourava a largura da tela).
   ≤991px: some o menu horizontal (quem navega é o botão MENU, que abre
   a gaveta), topbar compacta em 2 linhas, linha do logo em 3 colunas
   (MENU | logo | lupa + Associe-se) sem nunca passar da largura da
   tela. Fontes nunca abaixo de 16px (regra do projeto).
========================================================= */
@media(max-width:991px){

    html, body{
        overflow-x:hidden;
    }

    /* menu de desktop NÃO aparece no celular/tablet */
    .homepage2-header-nav{
        display:none;
    }

    /* ---- topbar ---- */
    .homepage2-header-topbar-inner{
        justify-content:center;
        gap:8px 14px;
        padding-block:8px;
    }
    .homepage2-header-topbar-left,
    .homepage2-header-topbar-right{
        justify-content:center;
        gap:8px 14px;
        max-width:100%;
    }
    .homepage2-header-topbar-divider{
        display:none;
    }
    /* link do número do WhatsApp repete o ícone social logo ao lado — no
       celular fica só o ícone social */
    .homepage2-header-topbar-right a[href*="api.whatsapp.com"]:has(> span){
        display:none;
    }

    /* ---- linha do logo ---- */
    .homepage2-header-mainheader-inner{
        grid-template-columns:auto minmax(0,1fr) auto;
        gap:10px;
        padding-block:12px;
    }
    .homepage2-header-menu-toggle{
        padding:8px 10px;
        gap:6px;
        font-size:16px;
        border-width:1px;
        border-radius:10px;
    }
    .homepage2-header-menu-toggle svg{
        width:18px;
        height:18px;
    }
    .homepage2-header-logo{
        min-width:0;
        max-width:100%;
    }
    .homepage2-header-logo img{
        height:56px;
        max-width:100%;
        object-fit:contain;
    }
    .homepage2-header-logo-tagline,
    .homepage2-header-logo-tagline--teste-atma{
        white-space:normal;
        text-align:center;
        font-size:16px;
        line-height:1.15;
        margin-top:4px;
    }
    .homepage2-header-mainheader-right{
        gap:8px;
        min-width:0;
    }
    .homepage2-header-mainheader-right .homepage2-header-mainheader-associese span{
        display:none;
    }
    .homepage2-header-mainheader-right .homepage2-header-mainheader-associese{
        padding:10px 12px;
    }
}

/* celulares estreitos: logo menor (slogan aparece em todos os tamanhos) */
@media(max-width:480px){
    .homepage2-header-logo img{
        height:48px;
    }
}

/* =====================================================
   HERO EM TABLET NA HORIZONTAL (992px–1239px) — 2026-10-14
   Achado na revisão responsiva: com o container ainda com padding
   lateral (abaixo de 1240px), o mascote (right:-30px) e o balão de
   fala saíam da tela (iPad deitado = barra de rolagem horizontal e
   balão cortado). Aqui o mascote fica dentro da tela, o balão (ainda
   aguardando aprovação) some como já some no mobile, e overflow-x:clip
   no Hero evita qualquer escape horizontal sem cortar o capacete
   (overflow-y continua visível).
   ===================================================== */
@media(min-width:992px) and (max-width:1239px){
    .homepage2-hero{
        overflow-x:clip;
    }
    .homepage2-hero-mascote-wrap{
        right:0;
    }
    .homepage2-hero-chip{
        display:none;
    }
}

/* Hero em notebook pequeno (1240px–1351px): o balão do mascote passava
   da borda direita (barra de rolagem horizontal em telas de 1280px).
   A camada do mascote desliza para a esquerda só o que falta pra caber
   (84px = 76px do balão + 8px de respiro); a partir de 1352px o cálculo
   dá zero e nada muda. */
@media(min-width:1240px) and (max-width:1351px){
    .homepage2-hero{
        overflow-x:clip;
    }
    .homepage2-hero-mascote-wrap{
        transform:translateX(min(0px, calc((100vw - 1200px) / 2 - 84px)));
    }
}

/* =====================================================
   HEADER NO CELULAR (até 700px) — 2026-10-19
   Pedido do Luciano (print temp/372.jpg): logo grande e sozinha
   numa linha; menu, busca e Associe-se logo abaixo, na mesma linha.
   ===================================================== */
@media(max-width:700px){
    .homepage2-header-mainheader-inner{
        grid-template-columns:auto minmax(0,1fr);
        grid-template-rows:auto auto;
        gap:16px;
        padding-block:16px;
    }
    .homepage2-header-logo{
        grid-column:1 / -1;
        grid-row:1;
        justify-self:center;
        min-width:0;
    }
    .homepage2-header-logo img{
        height:96px;
        max-width:100%;
    }
    .homepage2-header-menu-toggle{
        grid-column:1;
        grid-row:2;
        justify-self:start;
    }
    .homepage2-header-mainheader-right{
        grid-column:2;
        grid-row:2;
        justify-self:end;
        gap:12px;
    }
    .homepage2-header-mainheader-right .homepage2-header-mainheader-associese{
        padding:10px 14px;
    }
}

/* =====================================================
   TOPBAR NO CELULAR (até 700px) — 2026-10-19
   Pedido do Luciano (print temp/373.jpg): topbar em no máximo 2
   linhas. Linha 1: tema, tamanho da fonte e Denúncia (tamanho do
   conteúdo, sem esticar). Linha 2: telefone, redes, idioma e
   Área do Associado.
   ===================================================== */
@media(max-width:700px){
    .homepage2-header-topbar-inner{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        align-items:center;
        align-content:center;
        gap:10px 14px;
        padding-block:10px;
    }
    .homepage2-header-topbar-left,
    .homepage2-header-topbar-right{
        display:contents;
    }
    .homepage2-header-topbar-denuncia-destaque{
        width:auto;
        flex:0 0 auto;
        padding:6px 11px; /* 2026-10-20 (pedido do Luciano): botão um pouco menor no celular */
        font-size:13px;
    }
    .homepage2-header-topbar-denuncia-destaque i{
        font-size:12px;
    }
}

/* =====================================================
   SLOGAN NO CELULAR E TABLET (até 991px) — 2026-10-19
   Pedido do Luciano (print 2026-10-19): o slogan tem que aparecer
   também no celular, proporcional ao logo. Tamanho acompanha a
   largura da tela e o espaço fica reservado para duas linhas, pra
   a digitação do loop não empurrar o header.
   ===================================================== */
@media(max-width:991px){
    .homepage2-header-logo-tagline,
    .homepage2-header-logo-tagline--teste-atma{
        display:block;
        font-size:clamp(15px,4.6vw,20px);
        line-height:1.2;
        text-align:center;
        white-space:normal;
        min-height:2.4em;
    }
}

/* =====================================================
   HERO NO CELULAR E TABLET (até 991px) — reescrito em 2026-10-19
   Pedido do Luciano: o slider é dividido em duas partes.
   EM CIMA: título + texto, largura toda.
   EMBAIXO: uma área só, com 3 elementos posicionados por canto —
     botões   (topo, esquerda)
     mascote  (fundo, direita, encostado na borda da tela)
     controles (setas + bolinhas, fundo, centro, a 24px do fundo)
   Sem card, sem canto arredondado, imagem de uma margem a outra.
   O JS (homepage2-hero-slider.js) move o mascote de cada slide pra
   dentro de .homepage2-hero-texto nesta largura.
   ===================================================== */
.homepage2-hero-viewport{
    touch-action:pan-y; /* rolagem vertical é do navegador; o arrastar horizontal é do JS */
}
@media(max-width:991px){
    .homepage2-hero-mascotes{
        display:none; /* camada do desktop; no mobile o mascote mora dentro do slide */
    }
    .homepage2-hero-viewport{
        overflow:hidden; /* corta só a parte transparente dos PNG que passa da borda */
    }
    .homepage2-hero .homepage2-base-container{
        flex-direction:column;
        align-items:stretch;
        min-height:0;
        padding-top:32px;
        padding-bottom:0;
    }

    /* Texto do slide: uma coluna só, 3 linhas (título, texto, área de baixo). */
    .homepage2-hero-texto{
        display:grid;
        grid-template-columns:minmax(0,1fr);
        max-width:none; /* tablet: a área de baixo usa a largura toda, pro mascote encostar na borda */
        padding-bottom:0;
    }
    .homepage2-hero-cartao{
        display:contents;
    }

    /* EM CIMA */
    .homepage2-hero-titulo{
        grid-row:1;
        font-size:28px;
        margin-bottom:0;
    }
    .homepage2-hero-subtexto{
        grid-row:2;
        font-size:17px;
        max-width:640px; /* tablet: linha de leitura confortável */
        margin:6px 0 44px; /* 44px = respiro até os botões */
    }

    /* EMBAIXO: botões e mascote ocupam a mesma linha (a 3ª). */
    .homepage2-hero-ctas{
        grid-column:1;
        grid-row:3;
        justify-self:start;
        align-self:start;
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
        position:relative;
        z-index:1;
    }
    .homepage2-hero-ctas .homepage2-hero-btn-navy,
    .homepage2-hero-ctas .homepage2-base-btn-associado{
        font-size:13px;
        padding:10px 12px;
        gap:6px;
    }
    .homepage2-hero-mascote-wrap{
        grid-column:1;
        grid-row:3;
        justify-self:end;
        align-self:end;
        position:relative;
        right:auto;
        bottom:auto;
        display:block;
        width:min(92%,340px); /* no tablet não deixa o mascote virar um gigante */
        height:auto;
        margin:16px -20px 0 0; /* -20px anula o padding lateral do container: encosta na borda da tela */
        transition:none;
        pointer-events:none;
        z-index:2;
    }
    /* Mascote: largura manda, altura acompanha (nunca esticar). Cada PNG tem
       uma folga transparente à direita (medida no alpha); o translateX
       empurra essa folga pra fora da tela. Regra única pra QUALQUER mascote
       (nada por nome de arquivo): os valores vêm do PHP. */
    .homepage2-hero-floriano{
        display:block;
        /* Variáveis por mascote (--w, --folga, --prop) vêm inline do PHP,
           medidas na hora do upload (ver heroEstiloMascote). --w = largura
           da imagem em % da coluna; o excesso cresce pra esquerda
           (margin-left). --folga = parte transparente à direita: o
           translateX empurra essa folga pra fora da tela, encostando o
           personagem na borda. margin-top mantém a altura do card igual
           para qualquer proporção de imagem. */
        width:var(--w,112%);
        margin-left:calc(100% - var(--w,112%));
        margin-top:calc(110.4% - var(--w,112%) * var(--prop,0.986));
        height:auto;
        max-width:none;
        max-height:none;
        transform:translateX(calc(var(--folga,0) * 100%));
    }
    /* Slide sem mascote: não ocupa espaço. */
    .homepage2-hero-mascote-wrap.is-vazio{
        display:none;
    }
}

/* =====================================================
   HERO NO TABLET (601px a 991px) — 2026-10-20
   Pedido do Luciano: o hero é dividido em 2/5 e 3/5.
   LADO A (2/5): todo o conteúdo (título, texto, botões).
   LADO B (3/5): balão de fala (à esquerda) + mascote (à direita,
   no fundo, encostado na borda da tela). Fontes, botões, balão e
   mascote crescem com a largura da tela (clamp). Altura do card
   igual em todos os slides (min-height). Abaixo de 601px vale o
   layout do celular (sem balão).
   ===================================================== */
@media(min-width:601px) and (max-width:991px){
    .homepage2-hero .homepage2-base-container{
        min-height:clamp(500px,64vw,560px);
        padding-top:clamp(32px,5vw,48px);
    }
    .homepage2-hero-texto{
        flex:1 1 auto;
        grid-template-columns:minmax(0,2fr) minmax(0,3fr);
        grid-template-rows:auto auto auto 1fr;
    }

    /* LADO A */
    .homepage2-hero-titulo{
        grid-column:1;
        font-size:clamp(24px,3.6vw,36px);
        padding-right:20px;
    }
    .homepage2-hero-subtexto{
        grid-column:1;
        font-size:clamp(14px,1.8vw,17px);
        max-width:none;
        margin:12px 0 28px;
        padding-right:20px;
    }
    .homepage2-hero-ctas{
        grid-column:1;
        grid-row:3;
        flex-direction:row;
        flex-wrap:wrap;
        align-items:center;
        gap:12px;
        padding-right:20px;
    }
    .homepage2-hero-ctas .homepage2-hero-btn-navy,
    .homepage2-hero-ctas .homepage2-base-btn-associado{
        font-size:clamp(13px,1.6vw,15px);
        padding:clamp(10px,1.4vw,14px) clamp(12px,1.9vw,20px);
        gap:8px;
    }

    /* LADO B: mascote à direita (78% do lado B), balão à esquerda dele. */
    .homepage2-hero-mascote-wrap{
        grid-column:2;
        grid-row:1 / -1;
        justify-self:end;
        align-self:end;
        width:78%;
        margin:0 -20px 0 0;
    }
    .homepage2-hero-mascote-wrap .homepage2-hero-chip{
        display:block;
        left:auto;
        right:calc(100% - var(--tab-x,20%));
        top:var(--tab-y,4%);
        width:clamp(124px,17vw,170px);
        padding:clamp(12px,1.9vw,22px) clamp(10px,1.7vw,18px);
        font-size:clamp(14px,2vw,21px);
        border-radius:clamp(16px,2.2vw,22px);
    }
    /* Seta apontando pra direita (balão à esquerda do mascote, padrão). */
    .homepage2-hero-mascote-wrap .homepage2-hero-chip::after{
        left:auto;
        right:-13px;
        border-width:9px 0 9px 15px;
        border-color:transparent transparent transparent #ffffff;
    }
    /* Balão à DIREITA do mascote (escolhido no Painel, por slide): fica
       encostado na borda direita do mascote, com 24px de respiro da tela
       (com --tab-x padrão de 20%); aumentar --tab-x puxa o balão pra dentro
       (pro lado do mascote), diminuir empurra pra fora. Seta virada pro
       mascote (esquerda). */
    .homepage2-hero-mascote-wrap .homepage2-hero-chip--tab-dir{
        left:auto;
        right:calc(var(--tab-x,20%) - 20% + 24px);
    }
    .homepage2-hero-mascote-wrap .homepage2-hero-chip--tab-dir::after{
        left:-13px;
        right:auto;
        border-width:9px 15px 9px 0;
        border-color:transparent #ffffff transparent transparent;
    }
}

/* =====================================================
   LOGO NO TABLET (701px a 991px) — 2026-10-20
   Pedido do Luciano: a logo estava pequena demais (56px de altura, menor
   que a do celular, 96px). Cresce com a largura da tela: 100px em 768px
   e 129px em 991px (no desktop são 132px).
   ===================================================== */
@media(min-width:701px) and (max-width:991px){
    .homepage2-header-logo img{
        height:clamp(96px,13vw,130px);
    }
}

/* =====================================================
   BOTÕES DO HERO NO CELULAR (até 600px) — 2026-10-20
   Pedido do Luciano: botões um pouco maiores (eram 13px de texto e
   10px/12px de espaço). Texto no mínimo padrão do site (16px).
   ===================================================== */
@media(max-width:600px){
    .homepage2-hero-ctas{
        gap:12px;
    }
    .homepage2-hero-ctas .homepage2-hero-btn-navy,
    .homepage2-hero-ctas .homepage2-base-btn-associado{
        font-size:16px;
        padding:14px 18px;
        gap:8px;
    }
}