/* ==========================================================================
   PÁGINAS INTERNAS — SOBRE, TERAPIA, ABORDAGENS, BLOG, CONTATO E PRIVACIDADE
   ========================================================================== */

/* --------------------------------------------------------------------------
   TÓPICOS DE ATUAÇÃO
   -------------------------------------------------------------------------- */

/* Grade dos tópicos */
.grade-topicos {
    display: grid;
    grid-template-columns: 1fr;
    margin-top: 48px;
    max-width: 880px;
}

/* Estilo de cada tópico */
.topico {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 26px;
    row-gap: 10px;
    align-items: start;
    padding: 34px 0;
    border-bottom: 1px solid var(--linha);
}

/* Ícone alinhado ao início do título */
.topico > .orbita-icone {
    grid-column: 1;
    grid-row: 1 / span 2;
}

/* Título do tópico */
.topico h3 {
    grid-column: 2;
    grid-row: 1;
    font-size: 1.45rem;
    margin-bottom: 0;
}

/* Texto do tópico */
.topico p {
    grid-column: 2;
    grid-row: 2;
    max-width: 66ch;
    color: var(--tinta-2);
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   CICLO COGNITIVO-COMPORTAMENTAL
   -------------------------------------------------------------------------- */

/* Grade das etapas do ciclo */
.grade-ciclo {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 30px;
    margin-top: 56px;
}

/* Estilo de cada etapa do ciclo */
.ciclo-passo {
    position: relative;
    padding-top: 26px;
}

/* Desenha a linha fina no topo de cada etapa */
.ciclo-passo::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--terracota);
    transform-origin: left;
}

/* Anima a linha do topo quando o item aparece na tela */
.js .ciclo-passo::before {
    transform: scaleX(0);
    transition: transform 1.6s var(--curva) calc(var(--i, 0) * 0.14s + 0.15s);
}

/* Expande a linha do topo quando o item já apareceu */
.js .ciclo-passo.revelado::before {
    transform: scaleX(1);
}

/* Número da etapa do ciclo */
.ciclo-numero {
    display: block;
    font-family: var(--fonte-display);
    font-size: 1.9rem;
    line-height: 1;
    color: var(--terracota);
    margin-bottom: 12px;
}

/* Título da etapa do ciclo */
.ciclo-passo h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
}

/* Texto da etapa do ciclo */
.ciclo-passo p {
    color: var(--tinta-2);
    font-size: 0.94rem;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   FERRAMENTAS DA TCC
   -------------------------------------------------------------------------- */

/* Grade das ferramentas */
.grade-ferramentas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 72px;
    margin-top: 48px;
}

/* Estilo de cada ferramenta */
.ferramenta {
    padding: 28px 0;
    border-bottom: 1px solid var(--linha);
}

/* Título da ferramenta */
.ferramenta h3 {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: var(--verde);
}

/* Texto da ferramenta */
.ferramenta p {
    color: var(--tinta-2);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   PERGUNTAS FREQUENTES
   -------------------------------------------------------------------------- */

/* Bloco de perguntas frequentes */
.duvidas {
    display: grid;
}

/* Estilo de cada pergunta */
.duvidas details {
    border-bottom: 1px solid var(--linha);
}

/* Desenha a borda superior da primeira pergunta */
.duvidas details:first-of-type {
    border-top: 1px solid var(--linha);
}

/* Estilo do resumo da pergunta */
.duvidas summary {
    list-style: none;
    cursor: pointer;
    position: relative;
    padding: 24px 46px 24px 0;
    font-family: var(--fonte-display);
    font-size: 1.4rem;
    line-height: 1.3;
    transition: color 0.4s var(--curva);
}

/* Remove o marcador padrão do navegador */
.duvidas summary::-webkit-details-marker {
    display: none;
}

/* Desenha o sinal de mais ao lado da pergunta */
.duvidas summary::after {
    content: '+';
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--fonte-texto);
    font-weight: 300;
    font-size: 1.7rem;
    color: var(--terracota);
    transition: transform 0.4s var(--curva);
}

/* Gira o sinal de mais quando a pergunta está aberta */
.duvidas details[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Destaca a pergunta no estado de foco do mouse */
.duvidas summary:hover {
    color: var(--verde);
}

/* Texto da resposta */
.duvidas details p {
    padding: 0 46px 26px 0;
    color: var(--tinta-2);
    max-width: 58ch;
    line-height: 1.8;
}

/* --------------------------------------------------------------------------
   LINHA DO TEMPO DA FORMAÇÃO
   -------------------------------------------------------------------------- */

/* Estrutura da linha do tempo */
.linha-tempo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 44px;
    margin-top: 48px;
}

/* Estilo de cada momento da linha do tempo */
.momento {
    position: relative;
    padding-top: 26px;
}

/* Desenha a linha fina no topo de cada momento */
.momento::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--terracota);
    transform-origin: left;
}

/* Ano do momento */
.momento-ano {
    display: block;
    font-family: var(--fonte-display);
    font-size: 1.5rem;
    color: var(--terracota);
    margin-bottom: 10px;
}

/* Título do momento */
.momento h3 {
    font-size: 1.35rem;
    margin-bottom: 8px;
}

/* Texto do momento */
.momento p {
    color: var(--tinta-2);
    font-size: 0.94rem;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   DADOS INSTITUCIONAIS
   -------------------------------------------------------------------------- */

/* Lista de dados institucionais */
.fatos {
    margin: 56px 0 0;
    max-width: 820px;
}

/* Estilo de cada linha de dado */
.fatos > div {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: baseline;
    padding: 20px 0;
    border-bottom: 1px solid var(--linha);
}

/* Remove o espaçamento superior da primeira linha */
.fatos > div:first-child {
    padding-top: 0;
}

/* Rótulo do dado */
.fatos dt {
    font-size: 0.74rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--verde-medio);
}

/* Valor do dado */
.fatos dd {
    font-family: var(--fonte-display);
    font-size: 1.35rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   BLOG
   -------------------------------------------------------------------------- */

/* Barra de filtros do blog */
.filtro-blog {
    display: grid;
    grid-template-columns: 2fr 1fr auto;
    gap: 18px;
    align-items: end;
    padding-bottom: 30px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--linha);
}

/* Botão do filtro do blog */
.campo--botao .botao {
    padding: 14px 26px;
}

/* --------------------------------------------------------------------------
   ARTIGO
   -------------------------------------------------------------------------- */

/* Estrutura da página do artigo */
.artigo {
    padding: 56px 0 96px;
}

/* Cabeçalho do artigo */
.artigo-cabecalho {
    max-width: 760px;
    margin: 0 auto 40px;
    text-align: center;
}

/* Título do artigo */
.artigo-cabecalho h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    margin: 14px 0 0;
}

/* Resumo do artigo */
.artigo-resumo {
    margin-top: 20px;
    font-size: 1.16rem;
    line-height: 1.7;
    color: var(--tinta-2);
}

/* Data e tempo de leitura */
.artigo-meta {
    margin-top: 18px;
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--verde-medio);
}

/* Imagem de capa do artigo */
.artigo-capa {
    max-width: 960px;
    margin: 0 auto 48px;
}

* .artigo-capa img {
    width: 100%;
    border-radius: var(--raio);
}

/* Corpo do texto do artigo */
.artigo-corpo {
    max-width: 720px;
    margin: 0 auto;
}

/* Parágrafos do artigo */
.artigo-corpo p {
    margin-bottom: 22px;
    font-size: 1.08rem;
    line-height: 1.85;
    color: var(--tinta-leitura);
}

/* Subtítulos internos do artigo */
.artigo-corpo h2 {
    margin: 42px 0 14px;
    font-size: clamp(1.5rem, 2.4vw, 1.95rem);
    line-height: 1.25;
    color: var(--verde);
}

/* Primeiro subtítulo sem o espaço extra do topo */
.artigo-corpo > h2:first-child {
    margin-top: 0;
}

/* Rodapé do artigo */
.artigo-rodape {
    max-width: 720px;
    margin: 56px auto 0;
    padding-top: 30px;
    border-top: 1px solid var(--linha);
    display: grid;
    gap: 22px;
    justify-items: start;
}

/* Aviso do rodapé do artigo */
.artigo-rodape p {
    color: var(--tinta-2);
    font-size: 0.94rem;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   PÁGINA DE PRIVACIDADE
   -------------------------------------------------------------------------- */

/* Grade com índice lateral e texto */
.grade-documento {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 72px;
    align-items: start;
}

/* Índice lateral do documento */
.indice-documento {
    position: sticky;
    top: 104px;
}

/* Título do índice */
.indice-titulo {
    font-family: var(--fonte-texto);
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--verde-medio);
    margin-bottom: 16px;
}

/* Lista do índice */
.indice-documento ol {
    display: grid;
    gap: 2px;
    border-left: 1px solid var(--linha);
}

/* Links do índice */
.indice-documento a {
    display: block;
    padding: 7px 0 7px 18px;
    margin-left: -1px;
    border-left: 1px solid transparent;
    text-decoration: none;
    font-size: 0.94rem;
    line-height: 1.4;
    color: var(--tinta-2);
    transition: color 0.3s var(--curva), border-color 0.3s var(--curva), padding 0.3s var(--curva);
}

/* Destaca o link do índice no estado de foco do mouse */
.indice-documento a:hover {
    color: var(--verde);
    border-left-color: var(--verde-medio);
    padding-left: 22px;
}

/* Texto do documento legal */
.texto-legal {
    max-width: 70ch;
}

/* Títulos das seções do documento */
.texto-legal h2 {
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin: 64px 0 18px;
    scroll-margin-top: 110px;
}

/* Remove o espaçamento superior do primeiro título */
.texto-legal h2:first-child {
    margin-top: 0;
}

/* Parágrafos do documento */
.texto-legal p {
    margin-bottom: 18px;
    line-height: 1.85;
    color: var(--tinta-2);
}

/* Links do documento */
.texto-legal a {
    color: var(--verde);
    text-underline-offset: 4px;
}

/* --------------------------------------------------------------------------
   PÁGINA DE CONTATO
   -------------------------------------------------------------------------- */

/* Lista dos canais de contato */
.lista-canais {
    display: grid;
    margin-top: 34px;
}

/* Estilo de cada canal */
.lista-canais li {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 24px;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--linha);
}

/* Remove a borda superior do primeiro canal */
.lista-canais li:first-child {
    border-top: 1px solid var(--linha);
}

/* Título do canal */
.lista-canais h3 {
    font-size: 1.35rem;
    margin-bottom: 2px;
}

/* Texto do canal */
.lista-canais p {
    color: var(--tinta-2);
    font-size: 0.98rem;
}

/* Link do canal */
.lista-canais a {
    color: var(--verde);
    text-underline-offset: 3px;
}

/* Caixa de alerta sobre crise */
.caixa-alerta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 30px;
    border: 1px solid var(--verde-medio);
    background: var(--verde-neblina);
    border-radius: var(--raio);
    max-width: 860px;
    margin: 0 auto;
}

/* Título da caixa de alerta */
.caixa-alerta h2 {
    font-size: 1.7rem;
    margin: 0;
}

/* Texto da caixa de alerta */
.caixa-alerta p {
    color: var(--tinta);
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   RESPONSIVO — PÁGINAS INTERNAS
   -------------------------------------------------------------------------- */

/* Adapta as páginas internas para tablets */
@media (max-width: 960px) {
    .grade-topicos,
    .grade-ferramentas {
        grid-template-columns: 1fr;
        column-gap: 0;
    }

    .grade-ciclo {
        grid-template-columns: repeat(2, 1fr);
        gap: 34px;
    }

    .linha-tempo {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .filtro-blog {
        grid-template-columns: 1fr;
    }

    .grade-documento {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .indice-documento {
        position: static;
    }

    .fatos > div {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

/* Centraliza os títulos e ajusta os blocos no celular */
@media (max-width: 640px) {
    .grade-ciclo {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .topico {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
    }

    .topico p {
        max-width: 38ch;
    }

    .item-sinal {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 16px;
    }

    .item-sinal p {
        margin-inline: auto;
    }

    .lista-canais li {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
    }

    .cartao-formulario {
        padding: 24px 20px;
    }

    .artigo-cabecalho {
        text-align: left;
    }
}