/* =====================================================
   MAPAQUALI — GLOBAL
===================================================== */


/* =====================================================
   1. VARIÁVEIS — TEMA CLARO
===================================================== */

:root {

    /* =================================================
       IDENTIDADE
    ================================================= */

    --mq-primary: #2f78c9;
    --mq-primary-hover: #2468b1;
    --mq-primary-soft: #d6e8f8;

    --mq-secondary: #0a2945;
    --mq-secondary-hover: #123d63;
    --mq-secondary-soft: #dbe6ef;

    --mq-accent: #6fa7dc;


    /* =================================================
       FUNDOS GERAIS
    ================================================= */

    --mq-bg: #e7eef5;
    --mq-bg-alt: #dbe6ef;

    --mq-bg-body-start: #e3ebf2;
    --mq-bg-body-middle: #edf3f7;
    --mq-bg-body-end: #e4edf4;


    /* =================================================
       FUNDOS DE PÁGINAS
    ================================================= */

    --mq-page-start: #dce7f1;
    --mq-page-middle: #e8eff5;
    --mq-page-end: #edf3f7;

    --mq-news-start: #e1eaf2;

    --mq-portal-start: #c8d9e8;
    --mq-portal-middle: #dce7f0;
    --mq-portal-end: #c2d5e5;


    /* =================================================
       SUPERFÍCIES
    ================================================= */

    --mq-surface: #ffffff;
    --mq-surface-soft: #e2edf6;
    --mq-surface-muted: #cfdeea;


    /* =================================================
       TEXTOS
    ================================================= */

    --mq-text: #0a2945;
    --mq-text-soft: #415c74;
    --mq-text-muted: #6f8598;


    /* =================================================
       LINKS
    ================================================= */

    --mq-link: #216fb9;


    /* =================================================
       BORDAS
    ================================================= */

    --mq-border: #bfd0dd;
    --mq-border-strong: #9fb9cd;
    --mq-border-hover: #77a9d8;

    --mq-border-section: #c8d7e3;
    --mq-border-news: #c6d6e2;

    --mq-border-portal: #b8cad9;

    --mq-border-browser: #adbfce;
    --mq-border-browser-bar: #b7c9d7;


    /* =================================================
       HEADER
    ================================================= */

    --mq-header-bg: #f3f7fa;
    --mq-header-text: var(--mq-secondary);

    --mq-header-border: #c9d8e4;


    /* =================================================
       FOOTER
    ================================================= */

    --mq-footer-bg: var(--mq-header-bg);
    --mq-footer-text: var(--mq-text);


    /* =================================================
       ÍCONES
    ================================================= */

    --mq-icon-bg-start: #dceafb;
    --mq-icon-bg-end: #c9dff2;
    --mq-icon-border: #b5d0e7;


    /* =================================================
       BROWSER / PORTAL
    ================================================= */

    --mq-browser-bar-start: #dbe6ef;
    --mq-browser-bar-end: #cddbe7;

    --mq-browser-dot: #8097aa;


    /* =================================================
       BOTÃO PRIMÁRIO
    ================================================= */

    --mq-button-start: #347fd0;
    --mq-button-end: #2468ae;

    --mq-button-hover-start: #2d74c2;
    --mq-button-hover-end: #1f5d9e;


    /* =================================================
       SOMBRAS
    ================================================= */

    --mq-shadow:
        0 10px 30px rgba(18, 48, 75, 0.10);

    --mq-shadow-strong:
        0 20px 48px rgba(18, 48, 75, 0.16);

    --mq-shadow-hover:
        0 18px 42px rgba(18, 48, 75, 0.15);

    --mq-shadow-card-hover:
        0 20px 46px rgba(18, 48, 75, 0.16);

    --mq-shadow-browser:
        0 22px 50px rgba(18, 48, 75, 0.18);

    --mq-shadow-header:
        0 4px 18px rgba(16, 42, 67, 0.07);


    /* =================================================
       BARRAS DECORATIVAS
    ================================================= */

    --mq-divider-start: var(--mq-primary);
    --mq-divider-middle: var(--mq-accent);


    color-scheme: light;
}


/* =====================================================
   2. VARIÁVEIS — TEMA ESCURO
===================================================== */

html[data-theme="dark"] {

    /* =================================================
       IDENTIDADE
    ================================================= */

    --mq-primary: #69a8f2;
    --mq-primary-hover: #85b9f5;
    --mq-primary-soft: #153d63;

    --mq-secondary: #eef6ff;
    --mq-secondary-hover: #ffffff;
    --mq-secondary-soft: #102a43;

    --mq-accent: #3f7fbd;


    /* =================================================
       FUNDOS GERAIS
    ================================================= */

    --mq-bg: #061523;
    --mq-bg-alt: #081b2d;

    --mq-bg-body-start: #061523;
    --mq-bg-body-middle: #081b2d;
    --mq-bg-body-end: #061523;


    /* =================================================
       FUNDOS DE PÁGINAS
    ================================================= */

    --mq-page-start: #061523;
    --mq-page-middle: #081b2d;
    --mq-page-end: #0b2034;

    --mq-news-start: #081b2d;

    --mq-portal-start: #081b2d;
    --mq-portal-middle: #0b2034;
    --mq-portal-end: #102a43;


    /* =================================================
       SUPERFÍCIES
    ================================================= */

    --mq-surface: #0b2034;
    --mq-surface-soft: #102a43;
    --mq-surface-muted: #153754;


    /* =================================================
       TEXTOS
    ================================================= */

    --mq-text: #eef6ff;
    --mq-text-soft: #a9bad0;
    --mq-text-muted: #8197ae;


    /* =================================================
       LINKS
    ================================================= */

    --mq-link: var(--mq-primary);


    /* =================================================
       BORDAS
    ================================================= */

    --mq-border: #203b55;
    --mq-border-strong: #2c4e6c;
    --mq-border-hover: #4d79a1;

    --mq-border-section: #203b55;
    --mq-border-news: #203b55;

    --mq-border-portal: #203b55;

    --mq-border-browser: #2c4e6c;
    --mq-border-browser-bar: #203b55;


    /* =================================================
       HEADER
    ================================================= */

    --mq-header-bg: #081d31;
    --mq-header-text: var(--mq-text);

    --mq-header-border: #203b55;


    /* =================================================
       FOOTER
    ================================================= */

    --mq-footer-bg: var(--mq-header-bg);
    --mq-footer-text: var(--mq-text);


    /* =================================================
       ÍCONES
    ================================================= */

    --mq-icon-bg-start: #153d63;
    --mq-icon-bg-end: #102a43;
    --mq-icon-border: #2c4e6c;


    /* =================================================
       BROWSER / PORTAL
    ================================================= */

    --mq-browser-bar-start: #102a43;
    --mq-browser-bar-end: #0b2034;

    --mq-browser-dot: #8197ae;


    /* =================================================
       BOTÃO PRIMÁRIO
    ================================================= */

    --mq-button-start: #69a8f2;
    --mq-button-end: #3479ce;

    --mq-button-hover-start: #85b9f5;
    --mq-button-hover-end: #4d8dd8;


    /* =================================================
       SOMBRAS
    ================================================= */

    --mq-shadow:
        0 10px 32px rgba(0, 0, 0, 0.20);

    --mq-shadow-strong:
        0 20px 55px rgba(0, 0, 0, 0.35);

    --mq-shadow-hover:
        0 18px 42px rgba(0, 0, 0, 0.28);

    --mq-shadow-card-hover:
        0 20px 46px rgba(0, 0, 0, 0.30);

    --mq-shadow-browser:
        0 22px 50px rgba(0, 0, 0, 0.32);

    --mq-shadow-header:
        0 4px 18px rgba(0, 0, 0, 0.18);


    /* =================================================
       BARRAS DECORATIVAS
    ================================================= */

    --mq-divider-start: var(--mq-primary);
    --mq-divider-middle: var(--mq-accent);


    color-scheme: dark;
}


/* =====================================================
   3. RESET E BASE
===================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    background: var(--mq-bg);
    color: var(--mq-text);

    font-family:
        "Inter",
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;
}

a {
    color: inherit;
}

img,
svg {
    display: block;
}

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

button,
input,
textarea,
select {
    font: inherit;
}


/* =====================================================
   4. FUNDO GERAL — TEMA CLARO
===================================================== */

html:not([data-theme="dark"]) body {
    background:
        linear-gradient(
            180deg,
            var(--mq-bg-body-start) 0%,
            var(--mq-bg-body-middle) 48%,
            var(--mq-bg-body-end) 100%
        );
}


/* =====================================================
   5. HEADER — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-site-header {
    background:
        rgba(243, 247, 250, 0.98);

    border-bottom:
        1px solid var(--mq-header-border);

    box-shadow:
        var(--mq-shadow-header);
}


/* =====================================================
   6. SEÇÕES GERAIS — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-section {
    background:
        var(--mq-bg);
}

html:not([data-theme="dark"])
.mq-section--light {
    background:
        var(--mq-page-end);
}


/* =====================================================
   7. HOME — SEÇÃO "QUERO SABER MAIS"
===================================================== */

html:not([data-theme="dark"])
.mq-info-section {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-page-middle) 100%
        );

    border-bottom:
        1px solid var(--mq-border-section);
}


/* =====================================================
   8. HOME — CARDS INFORMATIVOS
===================================================== */

html:not([data-theme="dark"])
.mq-info-card {
    background:
        var(--mq-surface);

    border:
        1px solid var(--mq-border);

    box-shadow:
        var(--mq-shadow);
}

html:not([data-theme="dark"])
.mq-info-card:hover {
    transform:
        translateY(-5px);

    border-color:
        var(--mq-border-hover);

    box-shadow:
        var(--mq-shadow-card-hover);
}


/* =====================================================
   9. HOME — ÍCONES DOS CARDS
===================================================== */

html:not([data-theme="dark"])
.mq-info-card .mq-icon {
    color:
        var(--mq-primary);

    background:
        linear-gradient(
            145deg,
            var(--mq-icon-bg-start) 0%,
            var(--mq-icon-bg-end) 100%
        );

    border:
        1px solid var(--mq-icon-border);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.70);
}


/* =====================================================
   10. HOME — SEÇÃO PORTAL
===================================================== */

html:not([data-theme="dark"])
.mq-portal-section {
    position:
        relative;

    background:
        linear-gradient(
            135deg,
            var(--mq-portal-start) 0%,
            var(--mq-portal-middle) 50%,
            var(--mq-portal-end) 100%
        );

    border-top:
        1px solid var(--mq-border-portal);

    border-bottom:
        1px solid var(--mq-border-portal);
}


/* =====================================================
   11. HOME — JANELA DO PORTAL
===================================================== */

html:not([data-theme="dark"])
.mq-browser {
    background:
        var(--mq-surface);

    border:
        1px solid var(--mq-border-browser);

    box-shadow:
        var(--mq-shadow-browser);
}

html:not([data-theme="dark"])
.mq-browser__bar {
    background:
        linear-gradient(
            180deg,
            var(--mq-browser-bar-start) 0%,
            var(--mq-browser-bar-end) 100%
        );

    border-bottom:
        1px solid var(--mq-border-browser-bar);
}

html:not([data-theme="dark"])
.mq-browser__bar span {
    background:
        var(--mq-browser-dot);
}


/* =====================================================
   12. HOME — SEÇÃO NOVIDADES
===================================================== */

html:not([data-theme="dark"])
.mq-news-section {
    background:
        linear-gradient(
            180deg,
            var(--mq-news-start) 0%,
            var(--mq-page-end) 100%
        );

    border-bottom:
        1px solid var(--mq-border-news);
}


/* =====================================================
   13. CARDS DE NOVIDADES
===================================================== */

html:not([data-theme="dark"])
.mq-news-card {
    background:
        var(--mq-surface);

    border:
        1px solid var(--mq-border);

    box-shadow:
        var(--mq-shadow);
}

html:not([data-theme="dark"])
.mq-news-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--mq-border-hover);

    box-shadow:
        var(--mq-shadow-hover);
}


/* =====================================================
   14. CARDS DE EQUIPE
===================================================== */

html:not([data-theme="dark"])
.mq-team-card {
    background:
        var(--mq-surface);

    border:
        1px solid var(--mq-border);

    box-shadow:
        var(--mq-shadow);
}

html:not([data-theme="dark"])
.mq-team-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--mq-border-hover);

    box-shadow:
        var(--mq-shadow-hover);
}


/* =====================================================
   15. TÍTULOS — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-section-heading h2,

html:not([data-theme="dark"])
.mq-info-card h3,

html:not([data-theme="dark"])
.mq-news-card h3,

html:not([data-theme="dark"])
.mq-news-card h3 a {
    color:
        var(--mq-text);
}


/* =====================================================
   16. TEXTOS SECUNDÁRIOS — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-section-heading p,

html:not([data-theme="dark"])
.mq-info-card p,

html:not([data-theme="dark"])
.mq-news-card p {
    color:
        var(--mq-text-soft);
}


/* =====================================================
   17. EYEBROWS — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-eyebrow {
    color:
        var(--mq-link);
}


/* =====================================================
   18. LINKS — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-card-link,

html:not([data-theme="dark"])
.mq-text-link {
    color:
        var(--mq-link);
}


/* =====================================================
   19. BOTÃO PRIMÁRIO — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-button--primary {
    background:
        linear-gradient(
            135deg,
            var(--mq-button-start) 0%,
            var(--mq-button-end) 100%
        );

    color:
        #ffffff !important;

    border-color:
        transparent;

    box-shadow:
        0 8px 22px
        rgba(47, 120, 201, 0.28);
}

html:not([data-theme="dark"])
.mq-button--primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--mq-button-hover-start) 0%,
            var(--mq-button-hover-end) 100%
        );

    box-shadow:
        0 12px 30px
        rgba(47, 120, 201, 0.34);
}


/* =====================================================
   20. PÁGINA DE NOVIDADES — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-news-listing {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-bg) 360px,
            var(--mq-page-end) 100%
        );

    color:
        var(--mq-text);
}


/* =====================================================
   21. ARTIGO DE NOVIDADES — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-news-article {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-page-middle) 360px,
            var(--mq-page-end) 100%
        );

    color:
        var(--mq-text);
}


/* =====================================================
   22. SOBRE O PROJETO — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-about-page {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-page-middle) 360px,
            var(--mq-page-end) 100%
        );

    color:
        var(--mq-text);
}


/* =====================================================
   23. EQUIPE — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-team-page {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-page-middle) 360px,
            var(--mq-page-end) 100%
        );

    color:
        var(--mq-text);
}


/* =====================================================
   24. DOCUMENTAÇÃO — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-documentation-page {
    background:
        linear-gradient(
            180deg,
            var(--mq-page-start) 0%,
            var(--mq-page-middle) 360px,
            var(--mq-page-end) 100%
        );

    color:
        var(--mq-text);
}


/* =====================================================
   25. BLOCOS INTERNOS — TEMA CLARO
===================================================== */

html:not([data-theme="dark"])
.mq-about-section,

html:not([data-theme="dark"])
.mq-team-section,

html:not([data-theme="dark"])
.mq-documentation-section {
    background:
        transparent;
}


/* =====================================================
   26. FOOTER
===================================================== */

.mq-footer {
    background:
        var(--mq-footer-bg);

    color:
        var(--mq-footer-text);
}


/* =====================================================
   27. BARRAS DECORATIVAS — ESTRUTURA
===================================================== */

.mq-info-section,
.mq-portal-section,
.mq-news-section,
.mq-about-section,
.mq-team-section {
    position:
        relative;
}


/* =====================================================
   28. BARRA — HOME / QUERO SABER MAIS
===================================================== */

.mq-info-section::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--mq-divider-start) 0%,
            var(--mq-divider-middle) 42%,
            transparent 100%
        );

    pointer-events:
        none;
}


/* =====================================================
   29. BARRA — HOME / PORTAL
===================================================== */

.mq-portal-section::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--mq-divider-start) 0%,
            var(--mq-divider-middle) 42%,
            transparent 100%
        );

    pointer-events:
        none;

    z-index:
        2;
}


/* =====================================================
   30. BARRA — HOME / NOVIDADES
===================================================== */

.mq-news-section::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--mq-divider-start) 0%,
            var(--mq-divider-middle) 38%,
            transparent 100%
        );

    pointer-events:
        none;
}


/* =====================================================
   31. BARRAS — SOBRE O PROJETO
===================================================== */

.mq-about-section +
.mq-about-section::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--mq-divider-start) 0%,
            var(--mq-divider-middle) 38%,
            transparent 100%
        );

    pointer-events:
        none;
}


/* =====================================================
   32. BARRAS — NOSSO TIME
===================================================== */

.mq-team-section +
.mq-team-section::before {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        4px;

    background:
        linear-gradient(
            90deg,
            var(--mq-divider-start) 0%,
            var(--mq-divider-middle) 38%,
            transparent 100%
        );

    pointer-events:
        none;
}


/* =====================================================
   33. BARRAS DECORATIVAS — MODO ESCURO
===================================================== */

/*
 * Como as cores das barras agora são variáveis,
 * não precisamos repetir os valores hexadecimais
 * específicos do modo escuro.
 */

html[data-theme="dark"]
.mq-info-section::before,

html[data-theme="dark"]
.mq-portal-section::before,

html[data-theme="dark"]
.mq-news-section::before,

html[data-theme="dark"]
.mq-about-section +
.mq-about-section::before,

html[data-theme="dark"]
.mq-team-section +
.mq-team-section::before {
    background:
        linear-gradient(
            90deg,
            var(--mq-divider-start) 0%,
            var(--mq-divider-middle) 42%,
            transparent 100%
        );
}


/* =====================================================
   34. TRANSIÇÕES
===================================================== */

.mq-site-header,
.mq-section,
.mq-info-card,
.mq-news-card,
.mq-team-card,
.mq-browser,
.mq-footer {
    transition:
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease,
        transform 0.20s ease;
}


/* =====================================================
   35. ACESSIBILIDADE
===================================================== */

:focus-visible {
    outline:
        3px solid
        color-mix(
            in srgb,
            var(--mq-primary) 55%,
            transparent
        );

    outline-offset:
        3px;
}


/* =====================================================
   36. REDUÇÃO DE MOVIMENTO
===================================================== */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior:
            auto;
    }

    *,
    *::before,
    *::after {
        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;
    }
}