/* =====================================================================================
   Formatação do conteúdo dos tutoriais e artigos (.textoArtigo .gs-art)
   -------------------------------------------------------------------------------------
   Reúne os estilos que hoje vêm em um <style> dentro do HTML de cada artigo (40 artigos
   do Tutoriais.xml usam o mesmo conjunto, com pequenas variações já incluídas aqui).
   Carregado pela página de detalhe (TutorialDetalhe.aspx).
   A seção 3 formata o cabeçalho da página (título do artigo), fora do conteúdo.

   1. Base: os mesmos seletores do <style> dos artigos. Quando o <style> for retirado do
      HTML dos artigos, a aparência continua a mesma.
   2. Ajustes do site (cor dos títulos, fonte): usam um seletor mais específico para valer
      também nos artigos que ainda trazem o <style> próprio, que aparece depois deste
      arquivo na página e, com o mesmo seletor, teria prioridade.
   ===================================================================================== */

/* -------------------------------------------------------------------------------------
   1. Base
   ------------------------------------------------------------------------------------- */
.textoArtigo .gs-art {
    --gs-tinta: #1f2a33;
    --gs-suave: #5c6b78;
    --gs-linha: #e2e7ec;
    --gs-marca: #2f9e94;
    --gs-marca-esc: #1f7a72;
    --gs-titulo: #0f2545;
    color: var(--gs-tinta);
    line-height: 1.65;
}

    /* Títulos */
    .textoArtigo .gs-art h2 {
        margin: 42px 0 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--gs-linha);
        color: var(--gs-titulo);
        font-size: 1.5rem;
        scroll-margin-top: 90px;
    }

    .textoArtigo .gs-art h3 {
        margin: 26px 0 6px;
        font-size: 1.15rem;
        scroll-margin-top: 90px;
    }

    /* Texto e listas */
    .textoArtigo .gs-art p {
        margin: 10px 0;
    }

    .textoArtigo .gs-art ul,
    .textoArtigo .gs-art ol {
        margin: 10px 0 10px 22px;
        padding: 0;
    }

    .textoArtigo .gs-art li {
        margin: 5px 0;
    }

    .textoArtigo .gs-art .gs-intro {
        font-size: 1.08rem;
        color: var(--gs-suave);
    }

    /* Rótulo da série/guia, acima do primeiro título */
    .textoArtigo .gs-art .gs-serie {
        display: inline-block;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--gs-marca-esc);
        background: #e3f3f1;
        border-radius: 20px;
        padding: 3px 12px;
        margin-bottom: 6px;
    }

    /* Sumário */
    .textoArtigo .gs-art nav.gs-sumario {
        background: #f7f9fb;
        border: 1px solid var(--gs-linha);
        border-radius: 8px;
        padding: 16px 22px;
        margin: 22px 0;
    }

        .textoArtigo .gs-art nav.gs-sumario ol {
            columns: 2;
            column-gap: 34px;
            margin: 8px 0 0 18px;
        }

        .textoArtigo .gs-art nav.gs-sumario li {
            break-inside: avoid;
            margin: 0 0 6px;
        }

        .textoArtigo .gs-art nav.gs-sumario a {
            color: var(--gs-marca-esc);
            text-decoration: none;
        }

            .textoArtigo .gs-art nav.gs-sumario a:hover {
                text-decoration: underline;
            }

    /* Caixas de destaque: informação (padrão), aviso, perigo e ok */
    .textoArtigo .gs-art .gs-box {
        border-left: 4px solid var(--gs-marca);
        background: #f0f8f7;
        padding: 12px 16px;
        margin: 16px 0;
        border-radius: 0 6px 6px 0;
    }

        .textoArtigo .gs-art .gs-box.gs-aviso {
            border-color: #b26a00;
            background: #fff8e6;
        }

        .textoArtigo .gs-art .gs-box.gs-perigo {
            border-color: #b3261e;
            background: #fdecea;
        }

        .textoArtigo .gs-art .gs-box.gs-ok {
            border-color: #2e7d32;
            background: #edf7ee;
        }

        .textoArtigo .gs-art .gs-box p {
            margin: 4px 0;
        }

    .textoArtigo .gs-art .gs-rot {
        display: block;
        font-weight: 700;
        margin-bottom: 2px;
        font-size: .92rem;
    }

    /* Passo a passo numerado */
    .textoArtigo .gs-art ol.gs-passos {
        counter-reset: gsp;
        list-style: none;
        margin-left: 0;
    }

        .textoArtigo .gs-art ol.gs-passos > li {
            counter-increment: gsp;
            position: relative;
            padding-left: 44px;
            margin: 14px 0;
        }

            .textoArtigo .gs-art ol.gs-passos > li::before {
                content: counter(gsp);
                position: absolute;
                left: 0;
                top: 0;
                width: 30px;
                height: 30px;
                background: var(--gs-marca);
                color: #fff;
                border-radius: 50%;
                text-align: center;
                line-height: 30px;
                font-weight: 700;
                font-size: 15px;
            }

    /* Lista de conferência (checklist) */
    .textoArtigo .gs-art ul.gs-check {
        list-style: none;
        margin-left: 0;
    }

        .textoArtigo .gs-art ul.gs-check li {
            position: relative;
            padding-left: 30px;
        }

            .textoArtigo .gs-art ul.gs-check li::before {
                content: "";
                position: absolute;
                left: 0;
                top: 4px;
                width: 16px;
                height: 16px;
                border: 2px solid var(--gs-marca);
                border-radius: 4px;
                background: #fff;
            }

    /* Figuras (capturas de tela) */
    .textoArtigo .gs-art figure.gs-fig {
        margin: 20px 0;
        background: #fbfcfd;
        border: 1px solid var(--gs-linha);
        border-radius: 8px;
        padding: 10px;
    }

        .textoArtigo .gs-art figure.gs-fig img {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
            border-radius: 5px;
        }

        .textoArtigo .gs-art figure.gs-fig figcaption {
            margin-top: 8px;
            font-size: .88rem;
            color: var(--gs-suave);
        }

    /* Tabelas */
    .textoArtigo .gs-art .gs-tabela {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .textoArtigo .gs-art table {
        width: 100%;
        border-collapse: collapse;
        margin: 14px 0;
        font-size: .93rem;
    }

    .textoArtigo .gs-art th,
    .textoArtigo .gs-art td {
        border: 1px solid var(--gs-linha);
        padding: 8px 10px;
        text-align: left;
        vertical-align: top;
    }

    .textoArtigo .gs-art th {
        background: #f2f6f8;
        font-weight: 600;
    }

    .textoArtigo .gs-art tr.gs-destaque td {
        background: #f0f8f7;
    }

        .textoArtigo .gs-art tr.gs-destaque td:first-child {
            font-weight: 700;
            color: var(--gs-marca-esc);
        }

    /* Blocos de destaque lado a lado (3 colunas) */
    .textoArtigo .gs-art .gs-destaques {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin: 20px 0;
    }

        .textoArtigo .gs-art .gs-destaques div {
            border-top: 3px solid var(--gs-marca);
            background: #f7f9fb;
            border-radius: 0 0 8px 8px;
            padding: 10px 14px;
        }

        .textoArtigo .gs-art .gs-destaques strong {
            display: block;
            color: var(--gs-marca-esc);
        }

        .textoArtigo .gs-art .gs-destaques span {
            font-size: .92rem;
            color: var(--gs-suave);
        }

    /* Etiqueta de resposta (ex.: "Sim", "Não") */
    .textoArtigo .gs-art .gs-resp {
        display: inline-block;
        font-weight: 700;
        font-size: .85rem;
        color: var(--gs-marca-esc);
        background: #e3f3f1;
        border-radius: 4px;
        padding: 1px 8px;
        margin-right: 6px;
    }

        .textoArtigo .gs-art .gs-resp.gs-resp-aviso {
            color: #8a5200;
            background: #fff1d6;
        }

    /* Código e teclas */
    .textoArtigo .gs-art code {
        background: #eef2f5;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: .88em;
        color: #24313b;
    }

    .textoArtigo .gs-art kbd {
        background: #fff;
        border: 1px solid #c8d0d8;
        border-bottom-width: 2px;
        border-radius: 4px;
        padding: 0 6px;
        font-size: .85em;
    }

    /* Perguntas expansíveis */
    .textoArtigo .gs-art details {
        border: 1px solid var(--gs-linha);
        border-radius: 8px;
        padding: 10px 14px;
        margin: 8px 0;
        background: #fff;
    }

        .textoArtigo .gs-art details summary {
            cursor: pointer;
            font-weight: 600;
        }

    /* Chamada para ação no fim do artigo */
    .textoArtigo .gs-art .gs-cta {
        background: #1f2a33;
        color: #fff;
        border-radius: 10px;
        padding: 20px 22px;
        margin: 30px 0;
    }

        .textoArtigo .gs-art .gs-cta strong.gs-cta-tit {
            display: block;
            font-size: 1.2rem;
            margin-bottom: 4px;
            color: #fff;
        }

        .textoArtigo .gs-art .gs-cta p {
            color: #d6dee5;
            margin: 4px 0 14px;
        }

        .textoArtigo .gs-art .gs-cta a {
            display: inline-block;
            margin: 4px 8px 4px 0;
            padding: 9px 18px;
            border-radius: 6px;
            text-decoration: none;
            font-weight: 600;
        }

            .textoArtigo .gs-art .gs-cta a.gs-bt1 {
                background: var(--gs-marca);
                color: #fff;
            }

            .textoArtigo .gs-art .gs-cta a.gs-bt2 {
                background: transparent;
                color: #fff;
                border: 1px solid #7f8f9c;
            }

    /* Próximos artigos da série */
    .textoArtigo .gs-art .gs-proximos {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin: 14px 0;
    }

        .textoArtigo .gs-art .gs-proximos a {
            flex: 1 1 220px;
            border: 1px solid var(--gs-linha);
            border-radius: 8px;
            padding: 12px 14px;
            text-decoration: none;
            color: var(--gs-tinta);
            background: #f7f9fb;
        }

            .textoArtigo .gs-art .gs-proximos a strong {
                display: block;
                color: var(--gs-marca-esc);
            }

    /* Palavras-chave no fim do artigo */
    .textoArtigo .gs-art .gs-tags span {
        display: inline-block;
        background: #eaf5f4;
        color: var(--gs-marca-esc);
        border: 1px solid #cfe6e3;
        border-radius: 20px;
        padding: 2px 11px;
        margin: 3px 4px 3px 0;
        font-size: .82rem;
    }

@media (max-width: 760px) {
    .textoArtigo .gs-art nav.gs-sumario ol {
        columns: 1;
    }

    .textoArtigo .gs-art .gs-destaques {
        grid-template-columns: 1fr;
    }

    .textoArtigo .gs-art table {
        font-size: .85rem;
    }
}

/* -------------------------------------------------------------------------------------
   2. Ajustes do site
   ".blog-details-wrap.textoArtigo" é o mesmo elemento da página (as duas classes juntas),
   só com prioridade maior que o <style> que alguns artigos ainda trazem.
   ------------------------------------------------------------------------------------- */

/* Cor dos títulos de seção */
.blog-details-wrap.textoArtigo .gs-art h2 {
    color: #0f2545;
}

/* Fonte Poppins em todo o texto do artigo (inclusive artigos sem .gs-art).
   Ficam de fora os ícones (Font Awesome) e os trechos de código, que precisam de fontes próprias. */
.blog-details-wrap.textoArtigo,
.blog-details-wrap.textoArtigo *:not(i):not(code):not(kbd):not(pre):not(samp):not([class*="fa-"]) {
    font-family: Poppins, sans-serif;
}

/* -------------------------------------------------------------------------------------
   3. Cabeçalho da página: título do artigo centralizado, no mesmo fundo da página
   ------------------------------------------------------------------------------------- */
.tutorial-cabecalho {
    padding: 72px 0 0;
    text-align: center;
}

.tutorial-cabecalho-conteudo {
    max-width: 880px;
    margin: 0 auto;
    padding-bottom: 32px;
    border-bottom: 1px solid #e2e7ec;
}

.tutorial-trilha {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
    font-family: Poppins, sans-serif;
    font-size: .875rem;
    font-weight: 500;
}

    .tutorial-trilha a {
        color: #1f7a72;
        text-decoration: none;
    }

        .tutorial-trilha a:hover {
            text-decoration: underline;
        }

    .tutorial-trilha span {
        color: #9aa7b2;
    }

.tutorial-cabecalho h1 {
    margin: 0 0 16px;
    color: #0f2545;
    font-family: Poppins, sans-serif;
    font-size: clamp(1.75rem, 1.1rem + 2.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-wrap: balance;
}

.tutorial-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 24px;
    color: #5c6b78;
    font-family: Poppins, sans-serif;
    font-size: .875rem;
}

@media (max-width: 767.98px) {
    .tutorial-cabecalho {
        padding-top: 40px;
    }

    .tutorial-cabecalho-conteudo {
        padding-bottom: 24px;
    }
}