/* =====================================================
   MAPAQUALI — HOME
   Padronizado com o sistema de cores do global.css
===================================================== */


/* =====================================================
   IMAGEM DO HERO — PRODUÇÃO
===================================================== */

:root {
    --mq-hero-image: url("https://data.inpe.br/mapaquali/wp-content/uploads/sites/12/2026/08/rios-amaz.jpg.jpeg");
}

/* =====================================================
   1. HERO
===================================================== */

.mq-hero {
    position: relative;

    display: flex;

    width: 100%;
    min-height: 680px;

    align-items: center;

    overflow: hidden;

    color: #ffffff;

    background-image:
        url("https://data.inpe.br/mapaquali/wp-content/uploads/sites/12/2026/08/rios-amaz.jpg.jpeg");

    background-repeat:
        no-repeat;

    background-position:
        center;

    background-size:
        cover;
}


.mq-hero__overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(3, 25, 48, 0.68) 0%,
            rgba(3, 30, 57, 0.48) 55%,
            rgba(3, 25, 48, 0.20) 100%
        );
}


.mq-container {
    width:
        min(1400px, calc(100% - 64px));

    margin:
        0 auto;
}


.mq-hero__content {
    position: relative;

    z-index: 2;

    padding-top:
        100px;

    padding-bottom:
        100px;
}


.mq-eyebrow {
    display: block;

    margin-bottom:
        20px;

    color:
        var(--mq-primary);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.mq-hero .mq-eyebrow {
    color:
        var(--mq-primary-hover);
}


.mq-hero h1 {
    max-width:
        820px;

    margin:
        0 0 24px;

    color:
        #ffffff;

    font-size:
        clamp(48px, 5.3vw, 82px);

    font-weight:
        750;

    line-height:
        0.98;

    letter-spacing:
        -0.045em;
}


.mq-hero p {
    max-width:
        650px;

    margin:
        0;

    color:
        rgba(255, 255, 255, 0.91);

    font-size:
        19px;

    line-height:
        1.7;
}


.mq-hero__actions {
    display: flex;

    margin-top:
        32px;

    align-items: center;

    flex-wrap: wrap;

    gap:
        12px;
}


/* =====================================================
   2. BOTÕES E LINKS
===================================================== */

.mq-button {
    display:
        inline-flex;

    min-height:
        48px;

    padding:
        0 24px;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    font-size:
        15px;

    font-weight:
        700;

    text-decoration:
        none;

    transition:
        transform 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}


.mq-button:hover {
    transform:
        translateY(-2px);
}


/* BOTÃO PRIMÁRIO */

.mq-button--primary {
    color:
        #ffffff !important;

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

    border:
        1px solid transparent;
}


.mq-button--primary:hover {
    background:
        linear-gradient(
            135deg,
            var(--mq-button-hover-start) 0%,
            var(--mq-button-hover-end) 100%
        );
}


/* BOTÃO OUTLINE DO HERO */

.mq-button--outline {
    color:
        #ffffff !important;

    background:
        transparent;

    border:
        1px solid rgba(255, 255, 255, 0.65);
}


.mq-button--outline:hover {
    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        #ffffff;
}


/* LINKS */

.mq-card-link,
.mq-text-link {
    color:
        var(--mq-link);

    font-weight:
        700;

    transition:
        color 0.25s ease;
}


.mq-card-link:hover,
.mq-text-link:hover {
    color:
        var(--mq-primary-hover);
}


.mq-card-link {
    margin-top:
        auto;

    font-size:
        15px;
}


.mq-text-link {
    flex-shrink:
        0;

    text-decoration:
        none;
}


/* =====================================================
   3. SEÇÕES GERAIS
===================================================== */

.mq-section {
    width:
        100%;

    padding:
        96px 0;

    background:
        var(--mq-bg);

    color:
        var(--mq-text);

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


.mq-section--light {
    background:
        var(--mq-bg);
}


.mq-section-heading {
    max-width:
        760px;

    margin-bottom:
        48px;
}


.mq-section-heading h2 {
    margin:
        8px 0 16px;

    color:
        var(--mq-text);

    font-size:
        clamp(36px, 4vw, 56px);

    font-weight:
        750;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}


.mq-section-heading p {
    margin:
        0;

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

    font-size:
        18px;

    line-height:
        1.7;
}


.mq-section-heading h2,
.mq-section-heading p,
.mq-info-card h3,
.mq-info-card p,
.mq-news-card__date,
.mq-news-card h3 a,
.mq-news-card p {
    transition:
        color 0.25s ease;
}


.mq-section-heading--row {
    display:
        flex;

    max-width:
        none;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        40px;
}


/* =====================================================
   4. CARDS DE INFORMAÇÃO
===================================================== */

.mq-card-grid {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        24px;
}


.mq-info-card {
    display:
        flex;

    min-height:
        330px;

    padding:
        32px;

    flex-direction:
        column;

    color:
        var(--mq-text);

    text-decoration:
        none;

    background:
        var(--mq-surface);

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

    border-radius:
        18px;

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

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background-color 0.25s ease,
        color 0.25s ease;
}


.mq-info-card:hover {
    transform:
        translateY(-6px);

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

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


.mq-info-card .mq-icon {
    display:
        inline-flex;

    width:
        62px;

    height:
        62px;

    margin-bottom:
        26px;

    align-items:
        center;

    justify-content:
        center;

    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);

    border-radius:
        16px;

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


.mq-info-card .mq-icon svg {
    width:
        28px;

    height:
        28px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.mq-info-card h3 {
    margin:
        0 0 14px;

    color:
        var(--mq-text);

    font-size:
        24px;

    line-height:
        1.2;
}


.mq-info-card p {
    margin:
        0 0 24px;

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

    font-size:
        16px;

    line-height:
        1.65;
}


/* =====================================================
   5. PORTAL
===================================================== */

.mq-portal-section {
    background:
        var(--mq-surface);
}


.mq-portal {
    display:
        grid;

    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items:
        center;

    gap:
        80px;
}


.mq-portal__content .mq-eyebrow {
    color:
        var(--mq-primary);
}


.mq-portal__content h2 {
    max-width:
        620px;

    margin:
        10px 0 22px;

    color:
        var(--mq-text);

    font-size:
        clamp(40px, 4.5vw, 62px);

    font-weight:
        750;

    line-height:
        1.02;

    letter-spacing:
        -0.04em;

    transition:
        color 0.25s ease;
}


.mq-portal__content > p {
    max-width:
        620px;

    margin:
        0;

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

    font-size:
        18px;

    line-height:
        1.75;

    transition:
        color 0.25s ease;
}


/* =====================================================
   6. LISTA DE RECURSOS DO PORTAL
===================================================== */

.mq-feature-list {
    display:
        grid;

    margin:
        30px 0 34px;

    padding:
        0;

    gap:
        16px;

    list-style:
        none;
}


.mq-feature-list li {
    position:
        relative;

    padding-left:
        34px;

    color:
        var(--mq-text);

    font-size:
        16px;

    line-height:
        1.5;

    transition:
        color 0.25s ease;
}


.mq-feature-list li::before {
    position:
        absolute;

    top:
        1px;

    left:
        0;

    display:
        flex;

    width:
        22px;

    height:
        22px;

    align-items:
        center;

    justify-content:
        center;

    content:
        "✓";

    color:
        #ffffff;

    background:
        var(--mq-primary);

    border-radius:
        50%;

    font-size:
        12px;

    font-weight:
        700;
}


/* =====================================================
   7. VISUAL DO PORTAL
===================================================== */

.mq-portal__visual {
    min-width:
        0;
}


.mq-browser {
    overflow:
        hidden;

    background:
        var(--mq-surface);

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

    border-radius:
        20px;

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

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}


.mq-browser__bar {
    display:
        flex;

    height:
        46px;

    padding:
        0 18px;

    align-items:
        center;

    gap:
        8px;

    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);

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


.mq-browser__bar span {
    display:
        block;

    width:
        10px;

    height:
        10px;

    background:
        var(--mq-browser-dot);

    border-radius:
        50%;
}


.mq-browser img {
    display:
        block;

    width:
        100%;

    height:
        auto;
}


/* =====================================================
   8. NOVIDADES
===================================================== */

.mq-news-section {
    background:
        var(--mq-bg);
}


.mq-news-section .mq-eyebrow {
    color:
        var(--mq-primary);
}


.mq-news-grid {
    display:
        grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap:
        28px;
}


.mq-news-card {
    overflow:
        hidden;

    background:
        var(--mq-surface);

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

    border-radius:
        18px;

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

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}


.mq-news-card:hover {
    transform:
        translateY(-5px);

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

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


.mq-news-card__image {
    display:
        block;

    width:
        100%;

    height:
        230px;

    overflow:
        hidden;
}


.mq-news-card__image img {
    display:
        block;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.35s ease;
}


.mq-news-card:hover
.mq-news-card__image img {
    transform:
        scale(1.04);
}


.mq-news-card__content {
    padding:
        28px;
}


.mq-news-card__date {
    color:
        var(--mq-primary);

    font-size:
        12px;

    font-weight:
        700;

    letter-spacing:
        0.1em;

    text-transform:
        uppercase;
}


.mq-news-card h3 {
    margin:
        10px 0 14px;

    font-size:
        23px;

    line-height:
        1.3;
}


.mq-news-card h3 a {
    color:
        var(--mq-text);

    text-decoration:
        none;
}


.mq-news-card h3 a:hover {
    color:
        var(--mq-primary);
}


.mq-news-card p {
    margin:
        0 0 22px;

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

    line-height:
        1.65;
}


.mq-news-card .mq-card-link {
    text-decoration:
        none;
}


.mq-news-empty {
    margin:
        0;

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


/* =====================================================
   9. DARK MODE
===================================================== */

html[data-theme="dark"]
.mq-section--light,

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


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


html[data-theme="dark"]
.mq-info-card,

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

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


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

    border-color:
        var(--mq-border-browser);
}


html[data-theme="dark"]
.mq-info-card,

html[data-theme="dark"]
.mq-news-card {
    box-shadow:
        var(--mq-shadow);
}


html[data-theme="dark"]
.mq-browser {
    box-shadow:
        var(--mq-shadow-browser);
}


html[data-theme="dark"]
.mq-info-card:hover,

html[data-theme="dark"]
.mq-news-card:hover {
    border-color:
        var(--mq-border-hover);

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


/* =====================================================
   10. RESPONSIVIDADE — DESKTOP MENOR
===================================================== */

@media (max-width: 1100px) {

    .mq-card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .mq-portal {
        grid-template-columns:
            1fr;

        gap:
            50px;
    }


    .mq-portal__visual {
        max-width:
            800px;
    }
}


/* =====================================================
   11. RESPONSIVIDADE — TABLET
===================================================== */

@media (max-width: 800px) {

    .mq-section {
        padding:
            72px 0;
    }


    .mq-section-heading {
        margin-bottom:
            36px;
    }


    .mq-section-heading--row {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            20px;
    }


    .mq-news-grid {
        grid-template-columns:
            1fr;
    }


    .mq-news-card__image {
        height:
            280px;
    }
}


/* =====================================================
   12. RESPONSIVIDADE — MOBILE
===================================================== */

@media (max-width: 768px) {

    .mq-container {
        width:
            calc(100% - 32px);
    }


    .mq-hero {
        min-height:
            620px;
    }


    .mq-hero__content {
        padding-top:
            80px;

        padding-bottom:
            80px;
    }


    .mq-hero h1 {
        font-size:
            clamp(42px, 12vw, 64px);
    }


    .mq-hero p {
        font-size:
            17px;
    }
}


/* =====================================================
   13. RESPONSIVIDADE — CELULAR PEQUENO
===================================================== */

@media (max-width: 580px) {

    .mq-card-grid {
        grid-template-columns:
            1fr;
    }


    .mq-info-card {
        min-height:
            280px;
    }


    .mq-news-card__image {
        height:
            220px;
    }
}


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

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

    .mq-button,
    .mq-info-card,
    .mq-news-card,
    .mq-news-card__image img {
        transition:
            none;
    }


    .mq-button:hover,
    .mq-info-card:hover,
    .mq-news-card:hover {
        transform:
            none;
    }


    .mq-news-card:hover
    .mq-news-card__image img {
        transform:
            none;
    }
}

/* =====================================================
   15. ÍCONES PADRONIZADOS DOS CARDS DA HOME
===================================================== */

/*
 * O WordPress pode remover SVGs inline.
 * Por isso os ícones abaixo são desenhados via CSS mask
 * e associados a classes específicas de cada card.
 */

/* Esconde SVGs inline, caso existam */
.mq-info-card .mq-icon svg {
    display: none !important;
}

/* Base dos ícones */
.mq-info-card .mq-icon {
    position: relative;
}

.mq-info-card .mq-icon::before {
    content: "";

    display: block;

    width: 28px;
    height: 28px;

    background-color: currentColor;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}

/* PROJETO */
.mq-info-card .mq-icon--project::before {
    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v14'/><path d='M8 7h7'/><path d='M8 11h7'/><path d='M8 15h4'/><path d='M3 19h18'/></g></svg>");

    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v14'/><path d='M8 7h7'/><path d='M8 11h7'/><path d='M8 15h4'/><path d='M3 19h18'/></g></svg>");
}

/* MONITORAMENTO */
.mq-info-card .mq-icon--monitoring::before {
    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='3'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='M2 12h2'/><path d='M20 12h2'/></g></svg>");

    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8'/><circle cx='12' cy='12' r='3'/><path d='M12 2v2'/><path d='M12 20v2'/><path d='M2 12h2'/><path d='M20 12h2'/></g></svg>");
}

/* NOSSO TIME */
.mq-info-card .mq-icon--team::before {
    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='10' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></g></svg>");

    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='10' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></g></svg>");
}

/* DOCUMENTAÇÃO */
.mq-info-card .mq-icon--documentation::before {
    -webkit-mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h6'/></g></svg>");

    mask-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><path d='M14 2v6h6'/><path d='M8 13h8'/><path d='M8 17h6'/></g></svg>");
}