/* .introducao {
    position: relative; overflow: hidden;
    img { width: 100%; }
    .topo_flutuante { position: absolute; left: 50%; top: 15%; width: 35%; font-size: min(72px, 3vw); line-height: 110%; font-family: "Outfit"; font-weight: 400; color: var(--c-azul-mais-escuro-font); }
} */

section {
    scroll-margin-top: 100px;
}

.introducao {
    width: 100%;
    .container {
        flex-direction: row;
        .coluna_introducao {
            width: 50%;
            font-family: "Outfit";
            h1 {
                color: var(--c-azul-mais-escuro-font);
                font-size: 54px;
                font-weight: 600;
                line-height: 110%;
            }
            h2 {
                color: var(--c-azul-mais-escuro-font);
                font-size: 24px;
                font-weight: 400;
            }
        }
    }
}

.duas_colunas {
    margin: 96px 0 48px 0;
    .subtitulo {text-align: center; font-size: 48px; line-height: 120%; font-family: "Outfit"; font-weight: 600; color: var(--c-lilas-medio); margin-bottom: 48px; width: 100%; }
    .subtitulo_etapa {text-align: center; font-size: 20px; line-height: 120%; font-family: "Outfit"; font-weight: 600; color: var(--c-lilas-medio); width: 100%; }
    .grid { width: 100%; display: grid; gap: 40px; grid-template-columns: 1fr 1fr; font-family: "Encode"; font-size: 18px; color: var(--c-azul-mais-escuro-font);
        img { width: 100%;  border-radius: 20px; }
        iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; }
    }
}

.explore {
    margin: 96px 0 48px 0;
    .subtitulo { text-align: center; font-size: 48px; line-height: 120%; font-family: "Outfit"; font-weight: 600; color: var(--c-lilas-medio); margin-bottom: 48px; }
    .grid { width: 100%; display: grid; gap: 24px; grid-template-columns: repeat(5, 1fr);
        .item { display: flex; flex-direction: column; align-items: center; font-family: "Outfit";
            .item_nome { font-size: 24px; line-height: 120%; text-align: center; color: var(--inc); margin: 12px 0; }
            &.item_diagnostico { --inc: #6A5A92; }
            &.item_trilhas { --inc: #009AAF; }
            &.item_guia { --inc: #1D8595; }
            &.item_biblioteca { --inc: #2F9D71; }
            &.item_ferramentas { --inc: #799700; }
            .em_breve { font-family: "Encode"; display: block; background: var(--c-lilas-claro); color: white; font-size: 14px; line-height: 100%; letter-spacing: 4px; padding: 5px; border-radius: 5px; }
        }
    }
}

.ia_segura, .artigos { background: var(--gradiente-azul); padding: 48px 0; }

.ia_segura {
    .bolha_borda { background: linear-gradient(#0000, #229CAF); padding: 5px; display: inline-block; width: 100%; border-radius: 20px;
        .bolha_conteudo { background: white; color: black; text-decoration: none; padding: 60px; border-radius: 15px; display: grid; grid-gap: 24px; grid-template-columns: 1fr 1fr; grid-template-rows: max-content max-content 1fr; grid-template-areas: "t f" "c f" "b f";
            .bolha_titulo { grid-area: t; font-family: "Outfit"; color: var(--c-azul-900); font-size: 32px; font-weight: 700; line-height: 120%; }
            .bolha_texto { grid-area: c; font-family: "Encode"; line-height: 150%; font-size: 18px; p:not(:first-child) { margin: 12px 0 0 0; } p:first-child { margin: 0; } }
            .bolha_btn { grid-area: b; }
            .bolha_foto { grid-area: f; img { width: 100%; } }
        }
    }
}

.artigos {
    .container {
        .artigos_header { color: var(--c-lilas-escuro); font-size: 48px; font-weight: 600; margin-bottom: 28px; position: relative; font-family: "Outfit"; text-align: center; z-index: 0;
            /* &::before { content: ""; background: url(artigos_header_decor_esq.png); background-size: contain; position: absolute; aspect-ratio: 91 / 70; height: 40pt; left: -3%; bottom: -3%; z-index: -1 } */
            /* &::after { content: ""; background: url(artigos_header_decor_dir.png); background-size: contain; position: absolute; aspect-ratio: 94 / 54; height: 40pt; bottom: -9%; right: -6%; z-index: -1 } */
        }
        .artigos_descript { color: var(--c-azul-mais-escuro-font); font-size: 18px; font-weight: 400; margin-bottom: 48px; position: relative; font-family: "Outfit"; text-align: left; z-index: 0; text-align: center;
            p { width: 100%; max-width: 900px; margin: 0 auto; }
        }
        .artigos_grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 48px 24px;
            .artigo { display: flex; flex-direction: column; text-decoration: none;
                & div:nth-child(1){ background-size: cover; width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; }
                & div:nth-child(2){ margin: 36px 0 12px 0; font-family: "Outfit"; font-size: 20px; font-weight: 700; line-height: 120%; color: var(--c-azul-900) }
                & div:nth-child(3){ font-family: "Outfit"; font-size: 28px; font-weight: 700; line-height: 120%; color: var(--c-azul-900) }
                & div:nth-child(4){ font-family: "Encode"; color: black; line-height: 150%; font-size: 18px; }
            }
        }
    }
}

.modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: center; z-index: 1000;;
    .modal-content { border:4px solid var(--verde-lima); background-color: white; padding: 20px; border-radius: 24px; max-width: 600px; width: 90%;display: flex; flex-direction: column; align-items: center;;
        img { width: 100%; margin-bottom: 10px; }
        h2 { text-align: center; font-family: "Outfit"; font-size: 32px; font-weight: 700; margin-bottom: 10px; color:var(--c-azul-mais-escuro-font) }
        h3 { text-align: center;font-family: "Outfit"; font-size: 24px; font-weight: 400;  color:var(--c-azul-mais-escuro-font) }
    }
}


@media (max-width: 1199px){ .ia_segura .bolha_borda .bolha_conteudo { grid-template-columns: 1fr; grid-template-areas: "f" "t" "c" "b"; }}
@media (max-width: 1023px){
    .introducao {
        .container {
            flex-direction: column;
            .coluna_introducao {
                width: 100%;
                font-family: "Outfit";
            }
            .coluna_introducao:nth-child(2) { display: none; }
        }
    }

    .duas_colunas {
        .subtitulo { font-size: 32px; }
        .grid { width: 100%; display: flex; flex-direction: column-reverse; gap: 40px; }
    }


    .explore {
        .subtitulo { font-size: 32px; }
        .grid { grid-template-columns: 1fr 1fr; grid-gap: 48px 24px }
    }
    .ia_segura .bolha_borda .bolha_conteudo { padding: 24px; }
    .introducao {
        img { width: 200%; transform: translateX(10%); }
        .topo_flutuante { left: 5%; top: 5%; width: 75%; font-size: 72px; }
    }
    .artigos .container {
        .artigos_header { font-size: 32px; }
        .artigos_grid { grid-template-columns: 1fr; 
            .artigo div:nth-child(2) { margin: 16px 0 -8px 0; }
        }
    }
}






@media (max-width: 675px){ .explore .grid { grid-template-columns: 1fr; }}