/* =====================================================================
   HUB - Eu sou do Axé
   Base: estilo_inicial.css + estilo_cronometro.css do Jogos
   Celular primeiro; ajustes para tablet (>= 600px) e computador (>= 900px)
   ===================================================================== */

:root {
    --hub-azul: #0073aa;
    --hub-azul-escuro: #005177;
    --hub-azul-marca: #0a1f4d;
    --hub-verde: #28a745;
    --hub-verde-escuro: #1e7e34;
    --hub-roxo: #6f42c1;
    --hub-roxo-escuro: #5a32a3;
    --hub-vermelho: #dc3545;
    --hub-vermelho-escuro: #bd2130;
    --hub-texto: #333333;
    --hub-texto-suave: #666666;
    --hub-borda: #cccccc;
    --hub-raio: 8px;
}

/* Caixa translúcida do template (fundo fixo) */
.conteudo {
    width: 100%;
    max-width: 900px;
    margin: 24px auto;
    padding: 24px 12px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
}

/* Container Principal Responsivo */
.container-sistema-hub {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 16px;
    background: #ffffff;
    border-radius: var(--hub-raio);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--hub-texto);
    box-sizing: border-box;
}

.container-sistema-hub *,
.container-sistema-hub *::before,
.container-sistema-hub *::after {
    box-sizing: border-box;
}

.container-portal {
    max-width: 860px;
}

/* Linhas de identificação (iguais ao Jogos) */
.interacao-linha-1 {
    text-align: center;
    font-weight: bold;
    font-size: 1.05rem;
    margin-bottom: 5px;
    color: var(--hub-texto);
}

.interacao-linha-2 {
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--hub-texto-suave);
    overflow-wrap: anywhere;
}

.interacao-linha-3 {
    text-align: center;
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--hub-azul);
}

/* Cronômetro de Login */
.box-status-cronometro {
    background-color: #f0f7fb;
    border: 1px solid #bce1f0;
    border-left: 4px solid var(--hub-azul);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 0 0 18px 0;
    text-align: center;
    font-size: 0.92rem;
    color: #2c3e50;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.box-status-cronometro p {
    margin: 0;
    line-height: 1.6;
}

.box-status-cronometro .destaque-hora {
    font-weight: bold;
    color: var(--hub-azul);
}

.box-status-cronometro .destaque-cronometro {
    display: inline-block;
    font-weight: bold;
    color: #d9534f;
    font-family: monospace, monospace;
    font-size: 1.05rem;
    padding: 2px 6px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #ebccd1;
}

.box-status-cronometro .destaque-indeterminado {
    color: #27ae60;
    border-color: #27ae60;
}

/* Imagens: dia da semana e nível */
.hub-imagem-dia,
.hub-imagem-nivel {
    margin: 0 0 18px 0;
    text-align: center;
}

.hub-imagem-dia img,
.hub-imagem-nivel img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.hub-imagens-topo {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* Alertas */
.erro-alerta-hub,
.sucesso-alerta-hub,
.aviso-hub {
    padding: 12px;
    border-radius: 6px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 0.95rem;
}

.erro-alerta-hub {
    background-color: #fdf2f2;
    color: #de3545;
    border: 1px solid #fbc4c9;
}

.sucesso-alerta-hub {
    background-color: #d1e7dd;
    color: #0f5132;
    border: 1px solid #badbcc;
    font-weight: bold;
}

.aviso-hub {
    font-weight: bold;
    color: #de3545;
}

/* Abas de Navegação */
.abas-botoes {
    display: flex;
    width: 100%;
    margin-bottom: 22px;
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.aba-btn {
    flex: 1;
    min-height: 48px;
    padding: 12px 6px;
    border: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.95rem;
    color: #ffffff;
    background-color: #888888;
    transition: background-color 0.25s ease;
    text-align: center;
    line-height: 1.2;
}

.aba-btn.ativa {
    background-color: var(--hub-azul);
    font-weight: bold;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}

.aba-btn:not(.ativa):hover {
    background-color: #777777;
}

.conteudo-aba[hidden] {
    display: none !important;
}

/* Campos */
.campo-grupo {
    margin-bottom: 20px;
    text-align: left;
}

.campo-grupo label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #444444;
    font-size: 0.9rem;
}

.campo-grupo input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--hub-borda);
    border-radius: 6px;
    font-size: 16px; /* 16px evita o zoom automático no iPhone */
    background-color: #f9f9f9;
    transition: border-color 0.2s, background-color 0.2s;
}

.campo-grupo input:focus {
    border-color: var(--hub-azul);
    background-color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.15);
}

.campo-grupo input.valido-disponivel {
    border-color: #198754;
}

.campo-senha {
    position: relative;
}

.campo-senha input {
    padding-right: 48px;
}

.alternar-senha-btn {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: none !important;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.linha-instrucao {
    display: none;
    font-size: 0.82rem;
    font-weight: bold;
    color: var(--hub-texto-suave);
    margin-top: 5px;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

.linha-instrucao.linha-fixa {
    display: block;
}

/* Armadilha para robôs (honeypot) - invisível para pessoas */
.campo-armadilha {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Botões */
.btn-enviar,
.btn-cadastrar,
.btn-recuperar-senha,
.btn-logoff {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none !important;
    color: #ffffff !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    -webkit-appearance: none;
}

.btn-enviar { background-color: var(--hub-azul); margin-top: 10px; }
.btn-enviar:hover, .btn-enviar:focus { background-color: var(--hub-azul-escuro); }

.btn-cadastrar { background-color: var(--hub-verde); margin-top: 12px; }
.btn-cadastrar:hover, .btn-cadastrar:focus { background-color: var(--hub-verde-escuro); }

.btn-recuperar-senha { background-color: var(--hub-roxo); margin-top: 12px; }
.btn-recuperar-senha:hover, .btn-recuperar-senha:focus { background-color: var(--hub-roxo-escuro); }

.btn-logoff { background-color: var(--hub-vermelho); }
.btn-logoff:hover, .btn-logoff:focus { background-color: var(--hub-vermelho-escuro); }

.botoes-controle-login {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 5px;
}

.botoes-controle-login .btn-enviar {
    margin-top: 0;
}

.link-voltar {
    display: block;
    text-align: center;
    margin-top: 16px;
    color: var(--hub-azul) !important;
    font-weight: bold;
    font-size: 0.9rem;
    text-decoration: none;
}

/* Portal: escolha dos sites */
.hub-titulo-sites {
    text-align: center;
    font-size: 1.2rem;
    color: var(--hub-azul-marca);
    margin: 10px 0 16px;
}

.hub-grade-sites {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.hub-card-site {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #dfe6ee;
    border-radius: var(--hub-raio);
    overflow: hidden;
    text-decoration: none !important;
    color: var(--hub-texto) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.hub-card-site:hover,
.hub-card-site:focus {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.hub-card-site img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 520 / 120;
    object-fit: cover;
    background: #000;
}

.hub-card-texto {
    padding: 12px 14px 6px;
    font-size: 0.95rem;
    line-height: 1.4;
    flex: 1;
}

.hub-card-botao {
    margin: 6px 14px 14px;
    padding: 10px;
    border-radius: 6px;
    background: var(--hub-azul);
    color: #ffffff;
    font-weight: bold;
    text-align: center;
}

.hub-card-site:hover .hub-card-botao {
    background: var(--hub-azul-escuro);
}

.hub-gratuitos {
    text-align: center;
    font-weight: bold;
    color: var(--hub-verde-escuro);
    margin: 18px 0 8px;
}

/* Painel de acessos (administrador) */
.hub-painel {
    width: 100%;
    background: #ffffff;
    border-radius: var(--hub-raio);
    padding: 16px;
    box-sizing: border-box;
}

.hub-painel h2 { font-size: 1.3rem; margin-top: 0; }
.hub-painel h3 { font-size: 1.05rem; margin: 24px 0 8px; color: var(--hub-azul-marca); }

.hub-wrapper-tabela {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.hub-tabela-dados {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.88rem;
}

.hub-tabela-dados th {
    background: var(--hub-azul);
    color: #ffffff;
    padding: 8px;
    text-align: left;
}

.hub-tabela-dados td {
    border-bottom: 1px solid #e5e5e5;
    padding: 8px;
    vertical-align: top;
}

.hub-tabela-dados .td-destaque { font-weight: bold; }
.hub-tabela-dados .td-alerta { color: #ba3d32; }
.hub-tabela-dados .td-vazia-italica { font-style: italic; color: #888; text-align: center; }
.hub-roteiro { font-family: monospace; font-size: 0.82rem; line-height: 1.45; }
.status-saiu { color: #72777c; font-weight: bold; }
.status-online { color: #46b450; font-weight: bold; }

/* =====================================================================
   CABEÇALHO E MENU (padrão Dicionário / Casas: fundo preto, como o logo)
   ===================================================================== */
#masthead,
.site-header,
.main-header-bar,
.ast-above-header-bar,
.ast-below-header-bar,
.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-mobile-header-content,
.ast-desktop-header-content {
    background-color: #000000 !important;
    background-image: none !important;
    border-bottom: 0 !important;
}

/* Sem ícones de redes sociais no cabeçalho (vieram do modelo inicial do Astra) */
.site-header .ast-header-social-wrap,
.site-header .ast-builder-social-element,
.ast-mobile-header-content .ast-header-social-wrap {
    display: none !important;
}

/* Logo na metade do tamanho original (520x120 -> 260x60), como na Proposta 2.0,
   proporcional e sem cortar; no celular fica um pouco menor */
.site-branding .custom-logo-link img,
.site-logo-img img.custom-logo {
    width: 260px !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
}

@media (max-width: 599px) {
    .site-branding .custom-logo-link img,
    .site-logo-img img.custom-logo {
        width: 210px !important;
    }
}

/* Menus principais: fundo preto (computador e celular) */
.ast-builder-menu-1 .main-header-menu,
.ast-builder-menu-1 .main-header-menu > .menu-item,
.ast-builder-menu-mobile .main-navigation .main-header-menu,
.ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item {
    background-color: #000000 !important;
}

/* Submenus (Contato / Apoiador): fundo azul escuro */
.ast-builder-menu-1 .sub-menu,
.ast-builder-menu-1 .sub-menu .menu-item,
.ast-builder-menu-mobile .main-navigation .sub-menu,
.ast-builder-menu-mobile .main-navigation .sub-menu .menu-item {
    background-color: #0c0c4e !important;
}

.ast-builder-menu-1 .sub-menu {
    border-color: #ffffff !important;
}

/* Todas as fontes do menu em branco, em todos os dispositivos (inclusive ao passar o mouse) */
.ast-builder-menu-1 .menu-item > .menu-link,
.ast-builder-menu-1 .menu-item > .ast-menu-toggle,
.ast-builder-menu-1 .menu-item:hover > .menu-link,
.ast-builder-menu-1 .menu-item .menu-link:focus,
.ast-builder-menu-mobile .main-navigation .menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item:hover > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item:hover > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-ancestor > .ast-menu-toggle,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .ast-menu-toggle {
    color: #ffffff !important;
    font-size: 1rem;
    font-weight: normal;
    text-decoration: none;
}

.ast-builder-menu-1 .menu-link .ast-icon svg,
.ast-builder-menu-mobile .ast-icon svg {
    fill: #ffffff !important;
}

/* Linhas separadoras discretas no menu do celular */
.ast-builder-menu-mobile .main-navigation .menu-item .menu-link {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Página aberta: menu correspondente em negrito e sublinhado */
.ast-builder-menu-1 .menu-item.current-menu-item > .menu-link,
.ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link {
    color: #ffffff !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    text-underline-offset: 4px;
}

/* Botão "hambúrguer" do celular */
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-minimal .ast-mobile-svg,
.menu-toggle .ast-mobile-svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =====================================================================
   RODAPÉ PADRÃO (4 linhas - mesma formatação do Dicionário)
   ===================================================================== */
.site-below-footer-wrap[data-section="section-below-footer-builder"] {
    background-color: #0c0c4e !important;
    background-image: none !important;
    padding: 14px 10px;
}

.ast-footer-copyright,
.ast-footer-copyright p.rodape-linha {
    color: #ffffff !important;
    font-size: 11pt;
    text-align: center;
}

.ast-footer-copyright p.rodape-linha {
    margin: 0 0 4px 0;
    line-height: 1.5;
}

.ast-footer-copyright a.rodape-designer {
    color: #ccffff !important;
}

.ast-footer-copyright a.rodape-astra {
    color: #00ccff !important;
}

.ast-footer-copyright a:hover {
    text-decoration: underline;
}

/* =====================================================================
   BOTÃO FLUTUANTE DO WHATSAPP (igual ao Buffet / Iluminando)
   ===================================================================== */
.hub-whats {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #25d366;
    color: #ffffff !important;
    display: grid;
    place-items: center;
    box-shadow: 0 12px 30px -8px rgba(37, 211, 102, 0.7);
    transition: transform 0.2s;
}

.hub-whats:hover,
.hub-whats:focus {
    transform: scale(1.08);
    color: #ffffff !important;
}

.hub-whats svg {
    width: 34px;
    height: 34px;
}

/* Botão "voltar ao topo" do Astra: mesmo tamanho do WhatsApp,
   na mesma linha vertical (centralizados), logo acima dele */
#ast-scroll-top {
    right: 20px !important;
    bottom: 92px !important; /* 20 (margem) + 60 (WhatsApp) + 12 (espaço) */
    width: 60px !important;
    height: 60px !important;
    line-height: 60px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: grid;
    place-items: center;
    font-size: 18px;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.6);
}

#ast-scroll-top .ast-icon,
#ast-scroll-top svg {
    width: 20px;
    height: 20px;
    line-height: 1;
}

@media (max-width: 599px) {
    .hub-whats {
        right: 14px;
        bottom: 14px;
        width: 54px;
        height: 54px;
    }
    .hub-whats svg {
        width: 30px;
        height: 30px;
    }
    #ast-scroll-top {
        right: 14px !important;
        bottom: 80px !important; /* 14 + 54 + 12 */
        width: 54px !important;
        height: 54px !important;
        line-height: 54px !important;
    }
}

/* =====================================================================
   PÁGINAS DE TEXTO (Sobre esse Projeto, Contato, Apoiador)
   ===================================================================== */
.conteudo.conteudo-texto {
    background: rgba(255, 255, 255, 0.94);
    color: #111111;
    padding: 28px 16px;
}

.conteudo-texto img {
    max-width: 100%;
    height: auto;
}

.conteudo-texto .wp-block-image {
    margin: 18px auto;
}

.hub-contato-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

.hub-form-contato textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--hub-borda);
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    background-color: #f9f9f9;
    box-sizing: border-box;
    resize: vertical;
}

.hub-form-contato textarea:focus {
    border-color: var(--hub-azul);
    background-color: #ffffff;
    outline: none;
}

.hub-form-contato .campo-grupo input {
    font-family: inherit;
}

.contato-resposta {
    margin-top: 15px;
}

/* Textos grandes do Sobre ficam proporcionais no celular */
@media (max-width: 599px) {
    .conteudo-texto p[style*="font-size"] {
        font-size: 1.15rem !important;
        line-height: 1.5;
    }
    .conteudo-texto .has-large-font-size {
        font-size: 1.6rem !important;
    }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
    .conteudo.conteudo-texto {
        padding: 40px 32px;
    }

    .conteudo {
        margin: 40px auto;
        padding: 40px 20px;
    }

    .container-sistema-hub {
        padding: 24px;
    }

    .botoes-controle-login {
        flex-direction: row;
    }

    .botoes-controle-login > a {
        flex: 1;
    }

    .hub-grade-sites {
        grid-template-columns: 1fr 1fr;
    }

    .container-portal .hub-imagens-topo {
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        align-items: start;
    }
}

/* ---------- Computador ---------- */
@media (min-width: 900px) {
    .conteudo {
        padding: 60px 20px;
    }

    .hub-titulo-sites {
        font-size: 1.35rem;
    }
}

/* ---------- Celulares bem pequenos ---------- */
@media (max-width: 360px) {
    .container-sistema-hub {
        padding: 15px 12px;
    }
    .aba-btn {
        font-size: 0.85rem;
    }
    .box-status-cronometro {
        font-size: 0.85rem;
    }
}

/* #####################################################################
   VISUAL "AXÉ 2.0" (Proposta 2.0 aplicada ao HUB)
   Este bloco vem por último de propósito: ele moderniza o que está acima.
   ##################################################################### */
:root {
    --axe-navy-900: #060f26;
    --axe-navy-800: #0a1738;
    --axe-navy-700: #112452;
    --axe-navy-600: #1b3270;
    --axe-blue-600: #1569b8;
    --axe-blue-500: #1f7fd4;
    --axe-blue-400: #3e9ae6;
    --axe-cyan-400: #4fc3f7;
    --axe-cyan-200: #a9e3fb;
    --axe-gold: #e9b24b;
    --axe-ink: #15202e;
    --axe-ink-soft: #4a5b70;
    --axe-line: #e0e8f2;
    --axe-paper-2: #f4f8fc;
    --axe-paper-3: #eaf1f9;
    --axe-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --axe-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
    --axe-r-sm: 10px;
    --axe-r: 16px;
    --axe-r-lg: 24px;
    --axe-shadow-sm: 0 2px 10px rgba(16, 36, 82, .08);
    --axe-shadow: 0 12px 34px rgba(16, 36, 82, .14);
    --axe-shadow-lg: 0 26px 60px rgba(6, 15, 38, .40);
}

/* ---------- 1. Estrelas sobre o fundo cósmico ---------- */
body.page-template-template-conteudo-imagem-inicial::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .75;
    background-image:
        radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 27% 62%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 44% 30%, rgba(169,227,251,.8), transparent),
        radial-gradient(1px 1px at 58% 78%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 66% 12%, rgba(255,255,255,.6), transparent),
        radial-gradient(2px 2px at 83% 36%, rgba(169,227,251,.7), transparent),
        radial-gradient(1px 1px at 91% 72%, rgba(255,255,255,.5), transparent),
        radial-gradient(1px 1px at 6% 88%, rgba(255,255,255,.5), transparent),
        radial-gradient(1.5px 1.5px at 35% 92%, rgba(169,227,251,.6), transparent),
        radial-gradient(1px 1px at 76% 55%, rgba(255,255,255,.4), transparent);
}

/* A caixa translúcida antiga some: os blocos brancos flutuam sobre o céu */
.conteudo {
    background: transparent;
    box-shadow: none;
    max-width: 1000px;
}

/* ---------- 3. Fontes ---------- */
.container-sistema-hub,
.hub-painel,
.conteudo-texto,
.hub-familia,
.hub-modal {
    font-family: var(--axe-sans);
}

.hub-hero-titulo,
.hub-titulo-sites,
.hub-familia-titulo,
.rae-card h3,
.interacao-linha-1,
.hub-card-nome,
.hub-painel h2,
.hub-painel h3 {
    font-family: var(--axe-serif);
    font-weight: 600;
}

/* ---------- 2. Constelação + título da tela de entrada ---------- */
.hub-hero {
    text-align: center;
    color: #eaf3ff;
    padding: 8px 0 26px;
}

.hub-constelacao {
    position: relative;
    width: min(300px, 74vw);
    aspect-ratio: 1;
    margin: 0 auto 18px;
    isolation: isolate;
}

.hub-constelacao svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: .55;
}

.hub-constelacao-no {
    position: absolute;
    width: 22%;
    height: 22%;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .2);
    box-shadow: var(--axe-shadow-lg);
    object-fit: cover;
}

.hub-constelacao-no.n1 { top: 0; left: 50%; transform: translateX(-50%); }
.hub-constelacao-no.n2 { top: 50%; right: 0; transform: translateY(-50%); }
.hub-constelacao-no.n3 { bottom: 0; left: 50%; transform: translateX(-50%); }
.hub-constelacao-no.n4 { top: 50%; left: 0; transform: translateY(-50%); }

.hub-constelacao-centro {
    position: absolute;
    inset: 34%;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(79, 195, 247, .8);
    box-shadow: 0 0 38px rgba(79, 195, 247, .85);
    animation: hub-pulsar 3.2s ease-in-out infinite;
}

.hub-constelacao-centro img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@keyframes hub-pulsar {
    0%, 100% { box-shadow: 0 0 26px rgba(79, 195, 247, .6); }
    50%      { box-shadow: 0 0 48px rgba(79, 195, 247, 1); }
}

.hub-sobretitulo {
    display: inline-block;
    font-family: var(--axe-sans);
    font-weight: 700;
    font-size: .75rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--axe-cyan-200);
    margin-bottom: 6px;
}

.hub-hero-titulo {
    color: #ffffff;
    font-size: clamp(2.2rem, 7vw, 3.4rem);
    line-height: 1.05;
    margin: 0;
}

.hub-hero-sub {
    font-family: var(--axe-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 2.4vw, 1.35rem);
    color: #cfe4fb;
    margin: 8px auto 0;
    max-width: 34ch;
}

/* ---------- 5. Caixas, campos e botões modernos ---------- */
.container-sistema-hub {
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    padding: 24px 18px;
    color: var(--axe-ink);
}

.interacao-linha-1 {
    font-size: 1.35rem;
    color: var(--axe-navy-700);
}

.interacao-linha-2 { color: var(--axe-ink-soft); }
.interacao-linha-3 { color: var(--axe-blue-600); }

.campo-grupo label {
    color: var(--axe-ink);
    font-size: .92rem;
}

.campo-grupo input,
.hub-form-contato textarea {
    border: 1.5px solid var(--axe-line);
    border-radius: var(--axe-r-sm);
    background-color: var(--axe-paper-2);
    padding: 13px 15px;
    transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.campo-grupo input:focus,
.hub-form-contato textarea:focus {
    border-color: var(--axe-blue-500);
    background-color: #ffffff;
    box-shadow: 0 0 0 4px rgba(31, 127, 212, .16);
}

.campo-grupo input.valido-disponivel {
    border-color: #1f8f5f;
}

.btn-enviar,
.btn-cadastrar,
.btn-recuperar-senha,
.btn-logoff {
    border-radius: 999px;
    font-family: var(--axe-sans);
    font-weight: 600;
    letter-spacing: .01em;
    transition: transform .15s, box-shadow .2s, background-color .2s;
}

.btn-enviar:active,
.btn-cadastrar:active,
.btn-recuperar-senha:active,
.btn-logoff:active {
    transform: translateY(1px);
}

.btn-enviar { background-color: var(--axe-blue-500); box-shadow: 0 8px 22px rgba(31, 127, 212, .35); }
.btn-enviar:hover, .btn-enviar:focus { background-color: var(--axe-blue-600); box-shadow: 0 12px 30px rgba(31, 127, 212, .45); }
.btn-cadastrar { box-shadow: 0 8px 22px rgba(40, 167, 69, .30); }
.btn-recuperar-senha { box-shadow: 0 8px 22px rgba(111, 66, 193, .30); }
.btn-logoff { box-shadow: 0 8px 22px rgba(220, 53, 69, .28); }

.erro-alerta-hub,
.sucesso-alerta-hub {
    border-radius: var(--axe-r-sm);
}

/* ---------- 4. Abas em "pílula" ---------- */
.abas-botoes {
    gap: 6px;
    background: var(--axe-paper-3);
    padding: 5px;
    border-radius: 999px;
    overflow: visible;
}

.aba-btn {
    background: transparent;
    color: var(--axe-ink-soft);
    border-radius: 999px !important;
    font-family: var(--axe-sans);
    font-weight: 600;
    min-height: 44px;
    box-shadow: none;
}

.aba-btn:not(.ativa):hover {
    background: rgba(255, 255, 255, .6);
    color: var(--axe-ink);
}

.aba-btn.ativa {
    background: #ffffff;
    color: var(--axe-blue-600);
    box-shadow: var(--axe-shadow-sm);
}

/* ---------- 11. Checklist da senha ---------- */
.senha-checklist {
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 12px;
    background: var(--axe-paper-2);
    border-radius: var(--axe-r-sm);
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    font-size: .86rem;
}

.senha-checklist li {
    position: relative;
    padding-left: 26px;
    margin: 0;
    color: var(--axe-ink-soft);
    transition: color .2s;
}

.senha-checklist li::before {
    content: "○";
    position: absolute;
    left: 4px;
    top: 0;
    color: #b0bccb;
    font-weight: 700;
}

.senha-checklist li.ok {
    color: #1f8f5f;
    font-weight: 600;
}

.senha-checklist li.ok::before {
    content: "✓";
    color: #1f8f5f;
}

/* ---------- 12. Cronômetro com barra ---------- */
.box-status-cronometro {
    border-radius: var(--axe-r-sm);
    border-left-width: 4px;
}

.cronometro-barra {
    height: 6px;
    margin-top: 8px;
    background: #dbe7f3;
    border-radius: 999px;
    overflow: hidden;
}

.cronometro-barra span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--axe-cyan-400), var(--axe-blue-500));
    border-radius: 999px;
    transition: width 1s linear, background .4s;
}

.cronometro-barra span.pouco-tempo {
    background: linear-gradient(90deg, #f0ad4e, #d9534f);
}

/* ---------- Imagens do dia e do nível ---------- */
.hub-imagem-dia img,
.hub-imagem-nivel img {
    border-radius: var(--axe-r);
    border: 0;
    box-shadow: var(--axe-shadow);
}

/* ---------- 6. Cards dos sites com ícone ---------- */
.hub-titulo-sites {
    font-size: clamp(1.5rem, 3.6vw, 2rem);
    color: var(--axe-navy-700);
    margin: 18px 0 16px;
}

.hub-card-site {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--axe-line);
    border-radius: var(--axe-r);
    box-shadow: var(--axe-shadow-sm);
    transition: transform .2s, box-shadow .2s;
}

.hub-card-site:hover,
.hub-card-site:focus {
    transform: translateY(-4px);
    box-shadow: var(--axe-shadow);
}

.hub-card-site img.hub-card-icone {
    width: 64px;
    height: 64px;
    flex: none;
    aspect-ratio: auto;
    border-radius: 14px;
    object-fit: cover;
    background: none;
}

.hub-card-corpo {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.hub-card-nome {
    font-size: 1.3rem;
    line-height: 1.15;
    color: var(--axe-navy-700);
}

.hub-card-site .hub-card-texto {
    padding: 0;
    font-size: .92rem;
    color: var(--axe-ink-soft);
}

.hub-card-site .hub-card-botao {
    align-self: flex-start;
    margin: 6px 0 0;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--axe-blue-500);
    font-size: .88rem;
    font-weight: 600;
}

/* ---------- 7. Relembrar · Aprender · Ensinar ---------- */
.hub-rae {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 30px;
}

.rae-card {
    background: #ffffff;
    border: 1px solid var(--axe-line);
    border-radius: var(--axe-r);
    padding: 22px;
    box-shadow: var(--axe-shadow-sm);
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}

.rae-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--axe-shadow);
}

.rae-ic {
    width: 54px;
    height: 54px;
    margin: 0 auto 10px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.6rem;
    background: linear-gradient(160deg, var(--axe-blue-500), var(--axe-navy-600));
}

.rae-card h3 {
    font-size: 1.6rem;
    color: var(--axe-navy-700);
    margin: 0 0 6px;
}

.rae-card p {
    margin: 0;
    color: var(--axe-ink-soft);
    font-size: .98rem !important;
    line-height: 1.55;
}

/* ---------- 8. Faixa da família dos sites ---------- */
.hub-familia {
    background: linear-gradient(165deg, var(--axe-navy-800), var(--axe-navy-900));
    color: #eaf3ff;
    text-align: center;
    padding: 40px 16px 44px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.hub-familia-titulo {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    color: #ffffff;
    margin: 0;
}

.hub-familia-titulo b {
    color: var(--axe-gold);
    font-weight: 700;
}

.hub-familia-sub {
    color: var(--axe-cyan-200);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 600;
    margin: 6px 0 24px;
}

.hub-familia-grade {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    max-width: 980px;
    margin: 0 auto;
}

.hub-familia-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 10px;
    border-radius: var(--axe-r);
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    text-decoration: none !important;
    transition: background .2s, transform .2s;
}

.hub-familia-card:hover,
.hub-familia-card:focus {
    background: rgba(255, 255, 255, .1);
    transform: translateY(-3px);
}

.hub-familia-card img {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
}

.hub-familia-card .fc-nome {
    color: #ffffff;
    font-weight: 600;
    font-size: .9rem;
    line-height: 1.2;
}

.hub-familia-card .fc-tag {
    color: var(--axe-cyan-200);
    font-size: .76rem;
}

.hub-familia-card.is-atual {
    border-color: var(--axe-gold);
    background: rgba(233, 178, 75, .12);
}

.hub-familia-card.is-atual .fc-tag {
    color: var(--axe-gold);
}

/* ---------- 13. Caixa de mensagem (hubAlerta) ---------- */
.hub-modal-fundo {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(6, 15, 38, .65);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s;
}

.hub-modal-fundo.aberto { opacity: 1; }

.hub-modal {
    width: min(420px, 100%);
    background: #ffffff;
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    padding: 28px 22px 22px;
    text-align: center;
    transform: translateY(12px) scale(.97);
    transition: transform .2s;
}

.hub-modal-fundo.aberto .hub-modal { transform: none; }

.hub-modal-icone {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-size: 1.5rem;
    background: radial-gradient(circle, var(--axe-cyan-400), var(--axe-blue-600));
    box-shadow: 0 0 26px rgba(79, 195, 247, .7);
}

.hub-modal-texto {
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--axe-ink);
    margin: 0 0 18px;
}

.hub-modal .hub-modal-ok {
    margin-top: 0;
}

/* ---------- 14. Animação suave ao rolar ---------- */
.hub-revelar {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s ease;
}

.hub-revelar.visivel {
    opacity: 1;
    transform: none;
}

.hub-card-site.hub-revelar.visivel:hover,
.hub-familia-card.hub-revelar.visivel:hover,
.rae-card.hub-revelar.visivel:hover {
    transform: translateY(-4px);
}

/* ---------- 15. Cabeçalho fixo no topo ao rolar ---------- */
#masthead {
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

.admin-bar #masthead { top: 32px; }

@media (max-width: 782px) {
    .admin-bar #masthead { top: 46px; }
}

@media (max-width: 600px) {
    .admin-bar #masthead { top: 0; }
}

/* ---------- Páginas de texto ---------- */
.conteudo.conteudo-texto {
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    background: rgba(255, 255, 255, .96);
}

/* ---------- Tablet e computador ---------- */
@media (min-width: 600px) {
    .container-sistema-hub { padding: 30px 28px; }
    .hub-rae { grid-template-columns: repeat(3, 1fr); }
    .hub-familia-grade { grid-template-columns: repeat(3, 1fr); }
    .senha-checklist { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
    .hub-familia-grade { grid-template-columns: repeat(5, 1fr); }
}

/* Quem pediu menos movimento no aparelho não vê animações */
@media (prefers-reduced-motion: reduce) {
    .hub-revelar { opacity: 1; transform: none; }
    .hub-constelacao-centro { animation: none; }
    .hub-card-site, .hub-familia-card, .rae-card, .hub-modal, .hub-modal-fundo { transition: none; }
}
/* #####################################################################
   VISITANTE x CADASTRADO (tela de entrada)
   ##################################################################### */
.hub-vantagens {
    max-width: 640px;
    margin: 34px auto 0;
    text-align: center;
    color: #eaf3ff;
    font-family: var(--axe-sans);
}

.hub-vantagens-titulo {
    font-family: var(--axe-serif);
    font-weight: 600;
    font-size: clamp(1.8rem, 5vw, 2.4rem);
    color: #ffffff;
    margin: 0 0 6px;
}

.hub-vantagens-sub {
    color: #cfe4fb;
    margin: 0 auto 20px;
    max-width: 46ch;
}

.hub-vantagens-tabela {
    background: #ffffff;
    color: var(--axe-ink);
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    overflow: hidden;
    text-align: left;
}

.hv-linha {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    align-items: center;
    border-top: 1px solid var(--axe-line);
}

.hv-linha > span {
    padding: 11px 10px;
    font-size: .92rem;
    text-align: center;
}

.hv-linha > span:first-child {
    text-align: left;
    padding-left: 16px;
    color: var(--axe-ink-soft);
    font-weight: 500;
}

.hv-linha > span:not(:first-child) {
    font-weight: 600;
}

.hv-topo {
    border-top: 0;
    background: var(--axe-paper-2);
}

.hv-topo > span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 16px 6px 12px;
}

.hv-topo img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--axe-shadow-sm);
    margin-bottom: 4px;
}

.hv-topo b { font-size: .98rem; }
.hv-topo small { font-size: .74rem; color: var(--axe-ink-soft); font-weight: 500; }

.hv-destaque {
    background: rgba(31, 127, 212, .07);
    color: var(--axe-blue-600);
}

.hv-grupo {
    border-top: 1px solid var(--axe-line);
    background: var(--axe-navy-700);
    color: var(--axe-cyan-200);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 8px 16px;
}

.hub-vantagens-btn {
    display: inline-block;
    width: auto;
    margin-top: 22px;
    padding: 14px 30px;
}

.hub-vantagens-nota {
    margin: 16px auto 0;
    font-size: .9rem;
    color: #cfe4fb;
    max-width: 48ch;
}

.hub-vantagens-nota a,
.hub-familia-apoio a {
    color: var(--axe-gold) !important;
    font-weight: 600;
    text-decoration: none;
}

.hub-familia-apoio {
    margin: 22px auto 0;
    font-size: .88rem;
    color: #cfe4fb;
}

@media (max-width: 420px) {
    .hv-linha { grid-template-columns: 1.3fr 1fr 1fr; }
    .hv-linha > span { font-size: .84rem; padding: 10px 6px; }
    .hv-linha > span:first-child { padding-left: 12px; }
}

/* #####################################################################
   PÁGINA APOIADOR
   ##################################################################### */
.apo {
    font-family: var(--axe-sans);
    color: var(--axe-ink);
    display: grid;
    gap: 22px;
}

.apo h2 {
    font-family: var(--axe-serif);
    font-weight: 600;
    font-size: clamp(1.7rem, 4.4vw, 2.3rem);
    color: var(--axe-navy-700);
    margin: 0 0 10px;
    line-height: 1.1;
}

.apo-lead {
    color: var(--axe-ink-soft);
    margin: 0 0 16px;
}

/* Abertura */
.apo-hero {
    text-align: center;
    color: #eaf3ff;
    padding: 18px 6px 8px;
}

.apo-titulo {
    font-family: var(--axe-serif);
    font-weight: 600;
    font-size: clamp(2.2rem, 7vw, 3.5rem);
    line-height: 1.05;
    color: #ffffff;
    margin: 0 auto;
    max-width: 16ch;
}

.apo-sub {
    font-family: var(--axe-serif);
    font-style: italic;
    font-size: clamp(1.1rem, 2.6vw, 1.4rem);
    color: #cfe4fb;
    max-width: 46ch;
    margin: 12px auto 0;
}

.apo-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}

.apo-acoes .btn-enviar {
    width: auto;
    margin: 0;
    padding: 14px 28px;
}

.apo-btn-ouro {
    background: var(--axe-gold) !important;
    color: #3a2a08 !important;
    box-shadow: 0 10px 26px rgba(233, 178, 75, .45) !important;
}

.apo-btn-ouro:hover { background: #f6d79a !important; }

.apo-btn-vazado {
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, .55) !important;
    box-shadow: none !important;
}

.apo-btn-vazado:hover { background: rgba(255, 255, 255, .12) !important; }

/* Números */
.apo-numeros {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.apo-numero {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--axe-r);
    padding: 16px 8px;
    text-align: center;
}

.apo-numero b {
    display: block;
    font-family: var(--axe-serif);
    font-size: 2.3rem;
    line-height: 1;
    color: #ffffff;
}

.apo-numero span {
    font-size: .74rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--axe-cyan-200);
}

/* Blocos brancos */
.apo-bloco,
.apo-pix {
    background: #ffffff;
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    padding: 26px 18px;
}

.apo-bloco p { line-height: 1.65; }

.apo-h3 {
    font-family: var(--axe-serif);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--axe-navy-700);
    margin: 28px 0 12px;
}

/* Custos */
.apo-custos {
    display: grid;
    gap: 10px;
}

.apo-custo {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--axe-line);
    border-radius: var(--axe-r);
    background: var(--axe-paper-2);
}

.apo-custo-ic {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: linear-gradient(160deg, var(--axe-blue-500), var(--axe-navy-600));
}

.apo-custo-txt b { display: block; }
.apo-custo-txt span { font-size: .86rem; color: var(--axe-ink-soft); }

.apo-custo-valor {
    font-weight: 700;
    color: var(--axe-navy-700);
    white-space: nowrap;
    text-align: right;
}

.apo-custo-valor small {
    display: block;
    font-weight: 500;
    font-size: .74rem;
    color: var(--axe-ink-soft);
}

.apo-total {
    margin-top: 12px;
    padding: 16px;
    border-radius: var(--axe-r);
    background: linear-gradient(165deg, var(--axe-navy-700), var(--axe-navy-900));
    color: #ffffff;
    text-align: center;
}

.apo-total span { display: block; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--axe-cyan-200); }
.apo-total b { display: block; font-family: var(--axe-serif); font-size: 2.4rem; line-height: 1.1; }
.apo-total small { color: #cfe4fb; }

/* O que não entra na conta */
.apo-invisivel {
    display: grid;
    gap: 12px;
}

.apo-inv-card {
    border: 1px dashed #b9cbe0;
    border-radius: var(--axe-r);
    padding: 16px;
}

.apo-inv-card .apo-custo-ic { margin-bottom: 8px; }
.apo-inv-card b { font-size: 1.05rem; color: var(--axe-navy-700); }
.apo-inv-card p { margin: 6px 0 0; font-size: .92rem; color: var(--axe-ink-soft); }

/* PIX */
.apo-pix {
    border: 2px solid var(--axe-gold);
    scroll-margin-top: 100px;
}

.apo-valores {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.apo-valor {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    text-align: left;
    padding: 14px;
    border: 2px solid var(--axe-line);
    border-radius: var(--axe-r);
    background: #ffffff;
    color: var(--axe-ink);
    cursor: pointer;
    font: inherit;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}

.apo-valor:hover { border-color: var(--axe-blue-400); }

.apo-valor b {
    font-family: var(--axe-serif);
    font-size: 1.6rem;
    line-height: 1;
    color: var(--axe-navy-700);
}

.apo-valor span {
    font-size: .8rem;
    color: var(--axe-ink-soft);
    line-height: 1.35;
}

.apo-valor.ativo {
    border-color: var(--axe-gold);
    box-shadow: 0 0 0 4px rgba(233, 178, 75, .25);
    background: #fffaf0;
}

.apo-valor-livre { grid-column: 1 / -1; cursor: text; }

.apo-livre-campo {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-size: 1rem !important;
    font-weight: 600;
    color: var(--axe-ink) !important;
}

.apo-livre-campo input {
    width: 140px;
    padding: 8px 10px;
    border: 1.5px solid var(--axe-line);
    border-radius: var(--axe-r-sm);
    font-size: 16px;
}

.apo-pix-caixa {
    display: grid;
    gap: 18px;
    justify-items: center;
    padding: 18px;
    border-radius: var(--axe-r);
    background: var(--axe-paper-2);
}

.apo-qrcode {
    background: #ffffff;
    padding: 12px;
    border-radius: 12px;
    box-shadow: var(--axe-shadow-sm);
    line-height: 0;
}

.apo-qrcode img,
.apo-qrcode canvas { display: block; }

.apo-pix-info { width: 100%; text-align: center; }
.apo-pix-valor { font-family: var(--axe-serif); font-size: 1.5rem; font-weight: 600; color: var(--axe-navy-700); margin: 0 0 6px; }
.apo-pix-instr { font-size: .9rem; color: var(--axe-ink-soft); }

.apo-pix-codigo {
    width: 100%;
    font-family: monospace;
    font-size: .78rem;
    padding: 10px;
    border: 1.5px solid var(--axe-line);
    border-radius: var(--axe-r-sm);
    background: #ffffff;
    resize: none;
    word-break: break-all;
}

.apo-pix-chave { font-size: .85rem; color: var(--axe-ink-soft); margin: 12px 0 0; }

.apo-pix-breve {
    padding: 18px;
    border-radius: var(--axe-r);
    background: #fffaf0;
    border: 1px dashed var(--axe-gold);
    text-align: center;
    font-weight: 600;
    color: #6b4e10;
}

/* Outras formas */
.apo-formas {
    display: grid;
    gap: 10px;
}

.apo-forma {
    display: grid;
    grid-template-columns: 44px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    padding: 14px;
    border: 1px solid var(--axe-line);
    border-radius: var(--axe-r);
    text-decoration: none !important;
    color: var(--axe-ink) !important;
    transition: transform .2s, box-shadow .2s;
}

.apo-forma:hover { transform: translateY(-3px); box-shadow: var(--axe-shadow); }
.apo-forma span { grid-row: 1 / 3; font-size: 1.8rem; display: grid; place-items: center; }
.apo-forma b { color: var(--axe-navy-700); }
.apo-forma small { color: var(--axe-ink-soft); font-size: .86rem; line-height: 1.4; }

/* Transparência */
.apo-transparencia ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.apo-transparencia li {
    position: relative;
    padding-left: 28px;
    line-height: 1.55;
    font-size: .95rem;
}

.apo-transparencia li::before {
    content: "✦";
    position: absolute;
    left: 4px;
    color: var(--axe-blue-500);
}

/* Agradecimento */
.apo-obrigado {
    text-align: center;
    color: #cfe4fb;
    font-family: var(--axe-serif);
    font-size: clamp(1.15rem, 2.6vw, 1.35rem);
    font-style: italic;
    padding: 8px 6px 18px;
}

.apo-assinatura {
    font-style: normal;
    font-size: 2rem;
    color: #ffffff;
    margin-top: 10px;
    line-height: 1.1;
}

.apo-assinatura span {
    font-family: var(--axe-sans);
    font-size: .9rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--axe-gold);
}

@media (min-width: 600px) {
    .apo-numeros { grid-template-columns: repeat(3, 1fr); }
    .apo-bloco, .apo-pix { padding: 34px 32px; }
    .apo-valores { grid-template-columns: repeat(4, 1fr); }
    .apo-invisivel { grid-template-columns: repeat(3, 1fr); }
    .apo-formas { grid-template-columns: 1fr 1fr; }
    .apo-pix-caixa { grid-template-columns: auto 1fr; align-items: center; }
    .apo-pix-info { text-align: left; }
}

@media (min-width: 900px) {
    .apo-numeros { grid-template-columns: repeat(6, 1fr); }
}
/* Apoiador: "quanto custaria contratar" */
.apo-mercado {
    border: 1px dashed #b9cbe0;
    border-radius: var(--axe-r);
    padding: 14px;
    display: grid;
    gap: 10px;
}

.apo-mercado-linha {
    display: grid;
    grid-template-columns: 48px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: var(--axe-r-sm);
    background: var(--axe-paper-2);
}

.apo-mercado-total {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 18px 12px;
    border-radius: var(--axe-r);
    background: linear-gradient(165deg, var(--axe-navy-700), var(--axe-navy-900));
    color: #ffffff;
    text-align: center;
}

.apo-mercado-total span {
    display: block;
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--axe-cyan-200);
    margin-bottom: 4px;
}

.apo-mercado-total b {
    font-family: var(--axe-serif);
    font-size: clamp(1.6rem, 5vw, 2.3rem);
    line-height: 1.1;
}

.apo-riscado {
    text-decoration: line-through;
    text-decoration-color: rgba(233, 178, 75, .9);
    text-decoration-thickness: 3px;
    color: #cfe4fb;
}

.apo-zero { color: var(--axe-gold); }

.apo-mercado-seta {
    font-size: 1.6rem;
    color: var(--axe-gold);
}

.apo-mercado-nota {
    margin: 4px 0 0;
    font-size: .95rem;
    line-height: 1.6;
}

.apo-mercado-fonte {
    margin: 0;
    font-size: .76rem;
    color: var(--axe-ink-soft);
    font-style: italic;
}

@media (max-width: 420px) {
    .apo-mercado-linha { grid-template-columns: 40px 1fr; }
    .apo-mercado-linha .apo-custo-ic { width: 40px; height: 40px; font-size: 1.2rem; }
    .apo-mercado-linha .apo-custo-valor { grid-column: 2; text-align: left; }
    .apo-custo { grid-template-columns: 40px 1fr; }
    .apo-custo .apo-custo-ic { width: 40px; height: 40px; font-size: 1.2rem; }
    .apo-custo .apo-custo-valor { grid-column: 2; text-align: left; }
}
/* #####################################################################
   PÁGINA SOBRE ESSE PROJETO (mesmo estilo da Apoiador)
   ##################################################################### */
.sob-indice {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 820px;
    margin: 26px auto 0;
}

.sob-indice .rae-card {
    text-decoration: none !important;
    color: var(--axe-ink) !important;
    padding: 18px;
}

.sob-indice .rae-card h3 { font-size: 1.5rem; }

.sob-capitulo { scroll-margin-top: 100px; }

.sob-cap-num {
    display: inline-block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--axe-blue-600);
    margin-bottom: 4px;
}

.sob p {
    font-size: 1.02rem;
    line-height: 1.75;
}

.sob-citacao {
    margin: 18px 0;
    padding: 18px 20px 16px 22px;
    border-left: 4px solid var(--axe-gold);
    border-radius: 0 var(--axe-r) var(--axe-r) 0;
    background: linear-gradient(165deg, var(--axe-navy-700), var(--axe-navy-900));
    color: #ffffff;
}

.sob-citacao p {
    margin: 0;
    font-family: var(--axe-serif);
    font-size: clamp(1.25rem, 3.4vw, 1.6rem);
    font-style: italic;
    line-height: 1.35;
}

.sob-citacao cite {
    display: block;
    margin-top: 6px;
    font-style: normal;
    font-size: .8rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--axe-gold);
}

.sob-destaque {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 14px;
    align-items: start;
    margin: 18px 0;
    padding: 16px;
    border-radius: var(--axe-r);
    background: var(--axe-paper-2);
    border: 1px solid var(--axe-line);
}

.sob-destaque p { margin: 0; }

.sob-destaque-ic {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: linear-gradient(160deg, var(--axe-blue-500), var(--axe-navy-600));
}

.sob-destaque-ouro {
    background: #fffaf0;
    border-color: rgba(233, 178, 75, .5);
}

.sob-destaque-ouro .sob-destaque-ic {
    background: linear-gradient(160deg, #f6d79a, var(--axe-gold));
}

.sob-pergunta {
    margin-top: 22px;
    padding: 20px;
    border-radius: var(--axe-r);
    text-align: center;
    background: var(--axe-paper-3);
    color: var(--axe-ink-soft);
}

.sob-pergunta b {
    display: block;
    margin-top: 6px;
    font-family: var(--axe-serif);
    font-size: clamp(1.35rem, 3.6vw, 1.75rem);
    line-height: 1.25;
    color: var(--axe-navy-700);
}

/* Linha do tempo dos 5 sites */
.sob-linha-tempo {
    list-style: none;
    margin: 18px 0 0;
    padding: 0 0 0 26px;
    position: relative;
}

.sob-linha-tempo::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--axe-cyan-400), var(--axe-blue-600), var(--axe-gold));
}

.sob-linha-tempo li {
    position: relative;
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid var(--axe-line);
    border-radius: var(--axe-r);
    background: #ffffff;
    box-shadow: var(--axe-shadow-sm);
}

.sob-linha-tempo li::before {
    content: "";
    position: absolute;
    left: -25px;
    top: 20px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--axe-blue-500);
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 2px var(--axe-blue-500);
}

.sob-linha-tempo li:last-child { margin-bottom: 0; }

.sob-lt-data {
    display: inline-block;
    margin-bottom: 10px;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--axe-paper-3);
    color: var(--axe-blue-600);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.sob-linha-tempo img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    border-radius: 10px;
    margin: 0 0 12px;
}

.sob-linha-tempo li p:last-child { margin-bottom: 0; }

.sob-saudacao {
    font-family: var(--axe-serif);
    font-style: italic;
    font-size: 1.25rem !important;
    color: var(--axe-navy-700);
}

/* O HUB, quinto site, em destaque dourado */
.sob-linha-tempo li.sob-lt-hub {
    border: 2px solid var(--axe-gold);
    background: #fffaf0;
}

.sob-linha-tempo li.sob-lt-hub::before {
    background: var(--axe-gold);
    box-shadow: 0 0 0 2px var(--axe-gold), 0 0 16px rgba(233, 178, 75, .8);
}

.sob-lt-hub .sob-lt-data {
    background: var(--axe-gold);
    color: #3a2a08;
}

.sob-forma-ouro {
    border-color: var(--axe-gold) !important;
    background: #fffaf0;
}

@media (min-width: 600px) {
    .sob-indice { grid-template-columns: repeat(3, 1fr); }
    .sob-numeros { grid-template-columns: repeat(4, 1fr); }
    .sob-linha-tempo { padding-left: 34px; }
    .sob-linha-tempo li { padding: 20px 22px; }
    .sob-linha-tempo li::before { left: -33px; }
}

@media (min-width: 900px) {
    .sob-numeros { grid-template-columns: repeat(4, 1fr); }
}
/* CORREÇÃO (revisão 27/10): no celular os blocos das páginas Sobre/Apoiador
   passavam da borda direita. A coluna da grade não pode crescer além da tela. */
.apo {
    grid-template-columns: minmax(0, 1fr);
}

.apo > *,
.apo-bloco,
.apo-pix,
.sob-indice,
.sob-linha-tempo li {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.apo,
.apo p,
.apo li {
    overflow-wrap: anywhere;
}

.sob-indice .rae-card,
.apo-numero {
    box-sizing: border-box;
    min-width: 0;
}
/* Fechamento das páginas (Sobre / Apoiador): fontes maiores */
.apo-obrigado {
    font-size: clamp(1.45rem, 4.2vw, 2rem);
    line-height: 1.4;
}

.apo-assinatura {
    font-size: clamp(2.6rem, 8vw, 3.4rem);
    margin-top: 14px;
}

.apo-assinatura span {
    display: inline-block;
    margin-top: 6px;
    font-size: clamp(1.05rem, 3vw, 1.35rem);
    letter-spacing: .16em;
}

/* =====================================================================
   CABEÇALHO DE PONTA A PONTA NO PC (igual nos 5 sites):
   logo encostado à esquerda e menu encostado à direita
   ===================================================================== */
@media (min-width: 922px) {
    #ast-desktop-header .ast-primary-header-bar .ast-container,
    #ast-desktop-header .site-primary-header-wrap {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #ast-desktop-header .site-header-primary-section-left,
    #ast-desktop-header .site-header-primary-section-left > *,
    #ast-desktop-header .site-branding,
    #ast-desktop-header .ast-site-identity,
    #ast-desktop-header .site-logo-img,
    #ast-desktop-header .custom-logo-link {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    #ast-desktop-header .site-header-primary-section-right,
    #ast-desktop-header .site-header-primary-section-right > *,
    #ast-desktop-header .ast-builder-menu-1,
    #ast-desktop-header .ast-builder-menu-1 .main-header-menu {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}
/* reforço: o Dicionário tinha recuo de 15px no link do logo e o HUB
   uma caixinha vazia dos ícones sociais depois do menu */
@media (min-width: 922px) {
    html body #ast-desktop-header .site-branding a.custom-logo-link {
        margin-left: 0 !important;
        padding-left: 0 !important;
    }
}
.site-header [data-section^="section-hb-social-icons"] { display: none !important; }
/* =====================================================================
   ÍCONE DO HUB PULSANDO NO TOPO DA ENTRADA (igual aos sites de conteúdo;
   a estrela com os 5 sites fica em hub_renderizar_estrela() para depois)
   ===================================================================== */
.hub-hero-icone {
    display: block;
    width: 120px;
    height: 120px;
    margin: 0 auto 18px;
    border-radius: 28px;
    object-fit: cover;
    border: 2px solid rgba(79, 195, 247, .8);
    box-shadow: 0 0 38px rgba(79, 195, 247, .75);
    animation: hub-icone-pulsar 3.2s ease-in-out infinite;
}

@keyframes hub-icone-pulsar {
    0%, 100% { box-shadow: 0 0 26px rgba(79, 195, 247, .6); }
    50%      { box-shadow: 0 0 48px rgba(79, 195, 247, 1); }
}

@media (prefers-reduced-motion: reduce) {
    .hub-hero-icone { animation: none; }
}
/* =====================================================================
   MARGENS PADRÃO NOS 5 SITES (celular / tablet / computador)
   --axe-margem = da borda da tela até a caixa branca
   --axe-recuo  = da borda da caixa branca até o conteúdo
   ===================================================================== */
:root { --axe-margem: 16px; --axe-recuo: 20px; }

@media (min-width: 600px) { :root { --axe-margem: 24px; --axe-recuo: 28px; } }

@media (min-width: 922px) { :root { --axe-recuo: 32px; } }

html body .conteudo {
    box-sizing: border-box;
    padding-left: var(--axe-margem) !important;
    padding-right: var(--axe-margem) !important;
}

/* caixa branca de texto (Contato) não encosta nas bordas no celular/tablet */
@media (max-width: 921px) {
    html body .conteudo.conteudo-texto {
        width: auto !important;
        margin-left: var(--axe-margem) !important;
        margin-right: var(--axe-margem) !important;
    }
}

html body .conteudo.conteudo-texto {
    padding-left: var(--axe-recuo) !important;
    padding-right: var(--axe-recuo) !important;
}

/* caixas brancas: mesmo recuo interno em todos os sites */
html body .container-sistema-hub,
html body .apo-bloco,
html body .apo-pix,
html body .axe-capa-card,
html body .dic-container,
html body .pcpo-caixa-bloco,
html body .container-sistema-jogos,
html body .container-jogo-001,
html body .container-tab-jogadas,
html body .jpm-container {
    box-sizing: border-box;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--axe-recuo) !important;
    padding-right: var(--axe-recuo) !important;
}

/* o Ponto tinha um segundo recuo dentro da caixa */
html body .pcpo-caixa-corpo {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* a caixa do Ponto usava 95% da largura */
html body .pcpo-caixa-bloco { width: 100% !important; }
/* =====================================================================
   PÁGINA OS 7 NÍVEIS
   ===================================================================== */
.niv-aviso { border-left: 5px solid var(--axe-gold); }
.niv-aviso ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; line-height: 1.55; }

.niv-grade {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 22px 0;
}

.niv-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #ffffff;
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    padding: 16px var(--axe-recuo, 20px);
    color: var(--axe-ink);
}

.niv-card img {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    object-fit: cover;
    box-shadow: var(--axe-shadow-sm);
}

.niv-card h3 {
    font-family: var(--axe-serif);
    font-weight: 600;
    font-size: 1.6rem;
    line-height: 1.1;
    color: var(--axe-navy-700);
    margin: 2px 0 2px;
}

.niv-num {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--axe-blue-600);
}

.niv-quem { display: block; font-size: .9rem; color: var(--axe-ink); }
.niv-card p { margin: 4px 0 0; font-size: .92rem; line-height: 1.45; color: var(--axe-ink-soft); }

.niv-card.niv-3 { border-top: 4px solid #d4a52c; }
.niv-card.niv-4 { border-top: 4px solid #d9d2c3; }
.niv-card.niv-5 { border-top: 4px solid #9fb3c8; }
.niv-card.niv-6 { border-top: 4px solid #4fc3f7; }
.niv-card.niv-7 { border-top: 4px solid var(--axe-navy-700); }

.niv-tabela { margin-top: 10px; }
.niv-nota { margin: 14px 0 0; font-size: .9rem; color: var(--axe-ink-soft); text-align: center; }
.niv-acoes { text-align: center; }

@media (min-width: 600px) {
    .niv-grade { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 922px) {
    .niv-grade { grid-template-columns: repeat(3, 1fr); }
    .niv-card { flex-direction: column; text-align: center; padding: 22px 18px; }
    .niv-card img { width: 120px; height: 120px; }
}
/* primeira linha (sobretítulo) maior, proporcional ao título grande */
html body .hub-sobretitulo,
html body .axe-capa-sobretitulo {
    font-size: clamp(.95rem, 2.4vw, 1.1rem) !important;
    letter-spacing: .16em !important;
    margin-bottom: 8px;
}
/* =====================================================================
   FIGURAS NOS BOTÕES (axe_icones.js): ícone num círculo suave à esquerda
   ===================================================================== */
html body .axe-com-ico {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .6em;
}

html body .axe-com-ico .axe-ico {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 2em;
    height: 2em;
    margin: -.25em 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

html body .axe-com-ico .axe-ico svg {
    width: 1.15em;
    height: 1.15em;
    display: block;
}

/* botões claros (fundo branco/cinza): círculo azulado em vez de branco */
html body .aba-btn.axe-com-ico:not(.ativa) .axe-ico,
html body .btn-download.axe-com-ico .axe-ico {
    background: rgba(31, 127, 212, .12);
    box-shadow: inset 0 0 0 1px rgba(31, 127, 212, .25);
}

/* botões pequenos da faixa (Início / Sair) e abas: figura sem círculo */
html body .axe-faixa-botoes a.axe-com-ico,
html body .aba-btn.axe-com-ico {
    display: inline-flex !important;
    gap: .4em;
}

html body .axe-faixa-botoes a.axe-com-ico .axe-ico {
    width: auto;
    height: auto;
    margin: 0;
    background: none;
    box-shadow: none;
}

html body .axe-faixa-botoes a.axe-com-ico .axe-ico svg { width: 1em; height: 1em; }

/* o ícone acompanha o movimento do botão */
html body .axe-com-ico:hover .axe-ico { background: rgba(255, 255, 255, .28); }
/* abas Cadastrado/Visitante: figura pequena e sem círculo (o texto não quebra) */
html body .aba-btn.axe-com-ico .axe-ico {
    width: auto;
    height: auto;
    margin: 0;
    background: none !important;
    box-shadow: none !important;
}

html body .aba-btn.axe-com-ico .axe-ico svg { width: 1em; height: 1em; }
/* =====================================================================
   TOPO IGUAL EM TODAS AS PÁGINAS (ícone + 1ª linha + título + frase)
   ===================================================================== */
html body .apo-hero .hub-hero-icone { margin-bottom: 18px; }

html body .apo-titulo {
    font-size: clamp(2.2rem, 7vw, 3.4rem) !important;
    max-width: 18ch;
}

html body .apo-sub {
    font-size: clamp(1.1rem, 2.4vw, 1.35rem) !important;
}

/* Contato: agora sobre o céu; o formulário é o cartão branco */
html body .hub-contato-wrapper {
    background: #ffffff;
    border-radius: var(--axe-r-lg);
    box-shadow: var(--axe-shadow-lg);
    padding: 26px var(--axe-recuo, 20px);
    color: var(--axe-ink);
}
/* figuras dos botões no DOBRO do tamanho, em círculo sólido de contraste
   (as cores do círculo e do desenho vêm do axe_icones.js, conforme o botão) */
html body .axe-com-ico:not(.aba-btn):not(.axe-faixa-botoes > a) {
    gap: .8em;
    min-height: 4.2em;
    padding-top: .55em !important;
    padding-bottom: .55em !important;
}

html body .axe-com-ico:not(.aba-btn):not(.axe-faixa-botoes > a) .axe-ico {
    width: 3.4em;
    height: 3.4em;
    margin: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22) !important;
}

html body .axe-com-ico:not(.aba-btn):not(.axe-faixa-botoes > a) .axe-ico svg {
    width: 2.3em;
    height: 2.3em;
    stroke-width: 2.2;
}

html body .axe-com-ico:hover .axe-ico { transform: scale(1.06); }

/* botões pequenos da faixa e abas: figura média, sem círculo grande */
html body .axe-faixa-botoes a.axe-com-ico .axe-ico,
html body .aba-btn.axe-com-ico .axe-ico {
    width: 1.9em;
    height: 1.9em;
    box-shadow: none !important;
}

html body .axe-faixa-botoes a.axe-com-ico .axe-ico svg,
html body .aba-btn.axe-com-ico .axe-ico svg { width: 1.2em; height: 1.2em; }

/* as 3 páginas de texto do HUB começam na mesma altura das outras */
html body .apo-hero { padding-top: 8px !important; }
/* cartão de identificação no topo das páginas do HUB (igual ao da Página Principal) */
html body .hub-cartao-topo { margin: 6px auto 26px !important; }

html body .hub-cartao-acoes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

html body .hub-cartao-acoes a { margin: 0 !important; text-align: center; text-decoration: none !important; }

@media (max-width: 480px) {
    html body .hub-cartao-acoes { grid-template-columns: 1fr; }
}
/* =====================================================================
   MENU DO CELULAR/TABLET: o Astra de alguns sites pinta o fundo do LINK
   de branco (global-color-4); aqui o link também fica preto / azul-escuro
   ===================================================================== */
html body .ast-builder-menu-mobile .main-navigation .main-header-menu,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item > .menu-link,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item:hover > .menu-link,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item > .menu-link:focus,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item.current-menu-item > .menu-link,
html body .ast-builder-menu-mobile .main-navigation .main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
    background-color: #000000 !important;
    background-image: none !important;
}

html body .ast-builder-menu-mobile .main-navigation .sub-menu,
html body .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item,
html body .ast-builder-menu-mobile .main-navigation .sub-menu .menu-link,
html body .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item:hover > .menu-link,
html body .ast-builder-menu-mobile .main-navigation .sub-menu .menu-link:focus,
html body .ast-builder-menu-mobile .main-navigation .sub-menu .menu-item.current-menu-item > .menu-link {
    background-color: #0c0c4e !important;
    background-image: none !important;
}

html body .ast-builder-menu-mobile .main-navigation .menu-link,
html body .ast-builder-menu-mobile .main-navigation .ast-menu-toggle {
    color: #ffffff !important;
}

html body .ast-builder-menu-mobile .ast-menu-toggle svg,
html body .ast-builder-menu-mobile .ast-icon svg { fill: #ffffff !important; }
/* PC: links do submenu também em azul-escuro (o Dicionário pintava de preto) */
html body #ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-link,
html body #ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-item:hover > .menu-link {
    background-color: #0c0c4e !important;
    background-image: none !important;
}
/* =====================================================================
   NÚMEROS LEGÍVEIS: a Cormorant Garamond usa algarismos "de estilo antigo"
   (o 3 do "30" desce da linha); aqui ficam todos do mesmo tamanho
   ===================================================================== */
html body,
html body * {
    font-variant-numeric: lining-nums;
}

/* =====================================================================
   ÍCONE DA PRIMEIRA LINHA: "acende e apaga" mais evidente
   ===================================================================== */
@keyframes axe-pulsar-forte {
    0%, 100% {
        box-shadow: 0 0 10px rgba(79, 195, 247, .30);
        filter: brightness(.82) saturate(.9);
        transform: scale(.96);
    }
    50% {
        box-shadow: 0 0 22px 4px rgba(255, 255, 255, .55),
                    0 0 70px 18px rgba(79, 195, 247, .95);
        filter: brightness(1.22) saturate(1.15);
        transform: scale(1.06);
    }
}

html body .axe-capa-icone,
html body .hub-hero-icone {
    animation: axe-pulsar-forte 2.6s ease-in-out infinite !important;
    will-change: transform, filter, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
    html body .axe-capa-icone,
    html body .hub-hero-icone { animation: none !important; }
}
/* aviso para quem chegou de um site de conteúdo sem estar identificado */
html body .hub-aviso-entrada {
    margin: 4px 0 18px;
    padding: 16px 18px;
    border-radius: var(--axe-r);
    background: linear-gradient(165deg, #fff8e6, #fff2d1);
    border: 1px solid #e9b24b;
    border-left: 5px solid #e9b24b;
    color: #4a3a0c;
    font-size: .95rem;
    line-height: 1.5;
    text-align: left;
    box-shadow: 0 6px 18px rgba(233, 178, 75, .25);
}

html body .hub-aviso-entrada-titulo { display: block; color: var(--axe-navy-700); font-size: 1.02rem; margin-bottom: 6px; }
html body .hub-aviso-entrada ul { margin: 0 0 8px; padding-left: 1.2em; }
html body .hub-aviso-entrada li { margin: 2px 0; }

html body .hub-aviso-entrada-gratis {
    display: inline-block;
    margin: 2px 0 6px;
    padding: 3px 12px;
    border-radius: 999px;
    background: #28a745;
    color: #ffffff;
    font-weight: 700;
    font-size: .9rem;
}

html body .hub-aviso-entrada small { display: block; color: #6b5a24; font-size: .82rem; }
/* =====================================================================
   ÍCONE DA 1ª LINHA CENTRALIZADO entre a barra do topo e o primeiro texto
   (antes: PC 110px acima / 20 abaixo; tablet 84/14; celular 53/16).
   Sobe metade da diferença e devolve embaixo: o texto não sai do lugar.
   ===================================================================== */
html body .axe-capa-icone,
html body .hub-hero-icone {
    margin-top: -45px !important;
    margin-bottom: 63px !important;
}

@media (max-width: 921px) {
    html body .axe-capa-icone,
    html body .hub-hero-icone {
        margin-top: -35px !important;
        margin-bottom: 53px !important;
    }
}

@media (max-width: 599px) {
    html body .axe-capa-icone,
    html body .hub-hero-icone {
        margin-top: -19px !important;
        margin-bottom: 37px !important;
    }
}

/* =====================================================================
   SUBMENUS NO PC: cada nome numa linha só; o último menu ("Sites de Axé")
   abre para a ESQUERDA, sem sair da tela
   ===================================================================== */
@media (min-width: 922px) {
    html body #ast-desktop-header .ast-builder-menu-1 .sub-menu {
        width: auto !important;
        min-width: 220px;
    }

    html body #ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-link {
        white-space: nowrap !important;
    }

    html body #ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:last-child > .sub-menu {
        left: auto !important;
        right: 0 !important;
    }
}
/* =====================================================================
   CONTATO (HUB): caixas de digitação mais escuras e formulário com a
   mesma largura do cartão de cima (860px)
   ===================================================================== */
html body .hub-contato-wrapper {
    max-width: 860px !important;
    box-sizing: border-box;
}

html body .hub-form-contato .campo-grupo input,
html body .hub-form-contato textarea {
    background-color: #dbe5f1 !important;
    border: 1.5px solid #9fb3cc !important;
    color: var(--axe-ink) !important;
}

html body .hub-form-contato .campo-grupo input::placeholder,
html body .hub-form-contato textarea::placeholder { color: #5b6b80; }

html body .hub-form-contato .campo-grupo input:focus,
html body .hub-form-contato textarea:focus {
    background-color: #ffffff !important;
    border-color: var(--axe-blue-500) !important;
    box-shadow: 0 0 0 4px rgba(31, 127, 212, .18) !important;
}
/* =====================================================================
   LARGURA ÚNICA DAS CAIXAS BRANCAS (padrão da página Apoiador):
   toda caixa ocupa a largura inteira da área de conteúdo
   (no PC: 1000px - 24px de recuo de cada lado = 952px)
   ===================================================================== */
html body .axe-capa-card,
html body .axe-capa-interna .axe-capa-card,
html body .container-sistema-hub,
html body .container-portal,
html body .hub-cartao-topo,
html body .hub-contato-wrapper,
html body .hub-vantagens,
html body .dic-container,
html body .pcpo-caixa-bloco,
html body .jpm-container,
html body .container-jogo-001,
html body .container-tab-jogadas,
html body .container-sistema-jogos,
html body .cs-lista,
html body .cs-casa,
html body .cs-aviso-teste,
html body .apo-bloco,
html body .apo-pix,
body.page-id-169 .conteudo > p.has-background,
body.page-id-169 .conteudo > figure.wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}
/* Casas: "Giras" e "Trabalho social" uma embaixo da outra, na largura inteira */
html body .cs-duas { grid-template-columns: 1fr !important; }