:root {
    --brand-bg-image: url("/app/public/images/logo-solution-fundo-preto.jpg");
    --glass-blur: 28px;
    --glass-blur-soft: 20px;
    /* Camadas acima do fundo — só elas têm transparência; a imagem de fundo fica 100% */
    --glass-bg: rgba(8, 14, 28, 0.08);
    --glass-bg-medium: rgba(8, 14, 28, 0.12);
    --glass-bg-strong: rgba(8, 14, 28, 0.18);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 28px rgba(2, 8, 22, 0.08);
    --glass-inner: rgba(8, 14, 28, 0.07);
    --glass-inner-blur: 16px;
    --glass-backdrop: saturate(135%) blur(var(--glass-blur));
    --glass-backdrop-soft: saturate(135%) blur(var(--glass-blur-soft));
    --glass-backdrop-inner: saturate(130%) blur(var(--glass-inner-blur));
    /* Header e rodapé — tom mais claro (azul-cinza) */
    --shell-header-bg: rgba(72, 98, 145, 0.58);
    --shell-footer-bg: rgba(68, 94, 138, 0.62);
    --shell-border: rgba(255, 255, 255, 0.2);
    --shell-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    /* Tipografia */
    --text: #f6f9ff;
    --text-strong: #ffffff;
    --muted: #b3bed6;
    --heading: #3f8cff;
    --heading-light: #7eb2ff;
}

body.brand-bg {
    background-color: #070d1c;
    background-image: var(--brand-bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.glass-surface {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.glass-surface-medium {
    background: var(--glass-bg-medium);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}

.glass-surface-strong {
    background: var(--glass-bg-strong);
    backdrop-filter: var(--glass-backdrop-soft);
    -webkit-backdrop-filter: var(--glass-backdrop-soft);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow), var(--glass-highlight);
}

/* Header e rodapé — tom mais claro em todas as páginas com glass.css */
.topbar {
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    background: var(--shell-header-bg);
    border-bottom: 1px solid var(--shell-border);
    box-shadow: var(--glass-shadow), var(--shell-highlight);
}

.brand {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.brand img {
    display: block;
    width: auto;
    height: clamp(34px, 6vw, 46px);
    max-width: min(168px, 42vw);
    object-fit: contain;
}

.site-footer {
    position: relative;
    isolation: isolate;
    flex-shrink: 0;
    color: var(--text);
    font-family: Manrope, Arial, sans-serif;
    overflow: visible;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--shell-footer-bg);
    backdrop-filter: var(--glass-backdrop);
    -webkit-backdrop-filter: var(--glass-backdrop);
    border-top: 1px solid var(--shell-border);
    box-shadow: var(--shell-highlight);
    z-index: -1;
    pointer-events: none;
}

.site-footer-inner {
    position: relative;
    width: min(1140px, calc(100% - 40px));
    margin: 0 auto;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.site-footer-copy {
    margin: 0;
    color: var(--text);
}

.site-footer-copy small {
    display: block;
}

.site-footer-copy .muted {
    color: var(--muted);
}

.site-footer-copy a {
    color: var(--heading-light);
    text-decoration: none;
    font-weight: 700;
}

.site-footer-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--muted);
}