/*
PÁGINA "EM CONSTRUÇÃO" (HOME): FUNDO ANIMADO, PONTILHADO, LOGO, TÍTULO E FAIXA DE RODAPÉ.
O MESMO ARQUIVO É USADO NA PÁGINA INTERNA DE FERRAMENTAS.
*/

@font-face {
    font-family: 'Open Runde';
    src: url('../assets/fonts/Open Runde - Medium.otf') format('opentype');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Open Runde';
    src: url('../assets/fonts/Open Runde - SemiBold.otf') format('opentype');
    font-weight: 600;
    font-display: swap;
}

/* MESMOS TOKENS DO HUB DE FINANÇAS */
:root {
    --marqz-primary: #EB2850;
    --bg-canvas: #F4F5F7;
    --bg-glass: rgba(255, 255, 255, 0.72);
    --border-glass: rgba(203, 213, 225, 0.8);
    --dot-color: rgba(148, 163, 184, 0.4);
    --text-main: #0F172A;
    --text-muted: #64748B;
    --footer-h: 44px;
}

.dark {
    --bg-canvas: #0B0D11;
    --bg-glass: rgba(18, 21, 28, 0.72);
    --border-glass: rgba(255, 255, 255, 0.08);
    --dot-color: rgba(255, 255, 255, 0.11);
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
}

* {
    box-sizing: border-box;
}

/* O ATRIBUTO hidden SEMPRE OCULTA (SEM ISSO, display: flex DE main E DO RODAPÉ O SOBREPÕE) */
[hidden] {
    display: none !important;
}

html,
body {
    margin: 0;
    height: 100%;
}

body {
    font-family: 'Open Runde', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-canvas);
    color: var(--text-main);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* FUNDO ANIMADO (SHADER) + PONTILHADO POR CIMA */
#shader {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* NÉVOA RADIAL NA COR DO FUNDO ATRÁS DO CONTEÚDO CENTRAL: GARANTE A LEITURA SOBRE AS FAIXAS CLARAS */
.scrim {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(ellipse 34% 30% at 50% 50%, color-mix(in srgb, var(--bg-canvas) 70%, transparent), transparent 75%);
}

.dots {
    position: fixed;
    inset: 0;
    background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
    background-size: 20px 20px;
    pointer-events: none;
}

/* CONTEÚDO CENTRAL */
main {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

main h1 {
    margin: 0;
}

.logo {
    height: 104px;
    width: auto;
    margin: -18px 0;
    user-select: none;
    -webkit-user-drag: none;
}

.logo-dark {
    display: none;
}

.dark .logo-light {
    display: none;
}

.dark .logo-dark {
    display: block;
}

h2.status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.status-dot {
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    background: var(--marqz-primary);
    animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
    50% { opacity: 0.3; }
}

/* FAIXA DE RODAPÉ: FUNDO TRANSLÚCIDO COM DESFOQUE, ACIMA DO SHADER E DO PONTILHADO */
.footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-glass);
    border-top: 1px solid var(--border-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}