/* ==========================================
   4. SEÇÕES DO PORTFÓLIO
   ========================================== */

/* === TÍTULO DE SEÇÃO (compartilhado) === */
.titulo-secao {
    padding-bottom: 1rem;
}

/* ==========================================
   === SOBRE MIM ===
   ========================================== */
.secao-sobre {
    background-color: var(--cor-bg-preto);
    display: flex;
    flex-direction: column;
    align-items: left;
    text-align: justify;
    padding: 6rem 5rem;
    gap: 2rem;

    @media (min-width: 768px) {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    @media (min-width: 1024px) {
        padding-left: 12vw;
        padding-right: 12vw;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.sobre-conteudo {
    @media (min-width: 1024px) {
        max-width: 80rem;
    }
}

/* ==========================================
   === HABILIDADES ===
   ========================================== */
.secao-habilidades {
    padding: 6rem 2.4rem;
    background-color: var(--cor-bg-cinza);

    @media (min-width: 768px) {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    @media (min-width: 1024px) {
        padding-left: 12vw;
        padding-right: 12vw;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.grid-habilidades {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.4rem;

    @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.4rem;
    }
}

.card-habilidade {
    background-color: var(--cor-bg-cinza);
    padding: 3.2rem 2.4rem;
    border-radius: 1.2rem;
    border: 1px solid var(--cor-cinza-escuro);
    text-align: center;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        border-color: var(--cor-vermelho);
    }
}

.card-habilidade i,
.icone-destaque {
    font-size: 4.8rem;
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 1.6rem;
    color: var(--cor-branco);
    display: block;
    margin: 0 auto 1.6rem auto;
    line-height: 1;
}

.titulo-card {
    font-size: 2rem;
    color: var(--cor-branco);
    margin-bottom: 1.2rem;
}

.texto-card {
    font-size: 1.6rem;
    color: var(--cor-cinza-claro);
    line-height: 1.6;
    text-align: justify;
}

/* ==========================================
   === PROJETOS ===
   ========================================== */
.secao-projetos {
    padding: 6rem 2.4rem;
    background-color: var(--cor-bg-preto);

    @media (min-width: 768px) {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    @media (min-width: 1024px) {
        padding-left: 12vw;
        padding-right: 12vw;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.grid-projetos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.2rem;

    @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
    }

    @media (min-width: 1024px) {
        grid-template-columns: repeat(2, 1fr);
        gap: 4.8rem;
    }
}

.card-projeto {
    background-color: var(--cor-bg-preto);
    border-radius: 1.2rem;
    overflow: hidden;
    border: 1px solid var(--cor-cinza-escuro);
    display: flex;
    flex-direction: column;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

    &:hover {
        transform: translateY(-5px);
        border-color: var(--cor-vermelho);

        & .capa-icone span {
            transform: scale(1.1);
            color: var(--cor-vermelho);
        }
    }

    & .btn {
        @media (min-width: 768px) {
            padding: 0.8rem 1rem;
            font-size: 1.4rem;
            flex: 1;
            justify-content: center;
        }

        @media (min-width: 1024px) {
            padding: 1.2rem 2.4rem;
            font-size: 1.6rem;
        }
    }
}

.capa-icone {
    width: 100%;
    height: 20rem;
    background: linear-gradient(135deg, var(--cor-cinza-escuro) 0%, var(--cor-bg-cinza) 80%);
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid var(--cor-cinza-escuro);

    & span {
        font-size: 10rem;
        color: var(--cor-branco);
        transition:
            transform 0.3s ease,
            color 0.3s ease;
    }
}

.info-projeto {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 1.6rem;
}

.titulo-projeto {
    font-size: 2.2rem;
    color: var(--cor-branco);
}

.descricao-projeto {
    font-size: 1.6rem;
    color: var(--cor-cinza-claro);
    line-height: 1.5;
    text-align: justify;
}

.botoes-projeto {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.8rem;
    gap: 1rem;
    text-align: justify;

    @media (min-width: 768px) {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.2rem;
    }
}

/* ==========================================
   === CONTATO ===
   ========================================== */
.secao-contato {
    background-color: var(--cor-bg-cinza);
    padding: 6rem 2.4rem;

    & .titulo-secao {
        text-align: left;
        margin-bottom: 4rem;
    }

    @media (min-width: 768px) {
        padding-left: 4rem;
        padding-right: 4rem;
    }

    @media (min-width: 1024px) {
        padding-left: 12vw;
        padding-right: 12vw;
        padding-top: 8rem;
        padding-bottom: 8rem;
    }
}

.grid-contato {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;

    @media (min-width: 1024px) {
        grid-template-columns: 1fr 1.5fr;
        gap: 8rem;
        align-items: start;
    }
}

.info-contato-lista {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
    font-style: normal;
}

.card-contato {
    background-color: var(--cor-bg-preto);
    padding: 1.6rem 2.4rem;
    border-radius: 1.2rem;
    border: 1px solid var(--cor-cinza-escuro);
    display: flex;
    align-items: center;
    gap: 1.6rem;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;

    &:hover {
        transform: translateY(-3px);
        border-color: var(--cor-vermelho);
    }
}

.icone-contato,
.card-contato i {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 3.2rem;
    color: var(--cor-branco);
}

.dados-contato {
    display: flex;
    flex-direction: column;
}

.titulo-contato {
    font-size: 1.4rem;
    color: var(--cor-cinza-claro);
    margin-bottom: 0.4rem;
}

.link-contato,
.dados-contato p,
.dados-contato a {
    font-size: 1.6rem;
    color: var(--cor-branco);
    font-weight: 500;
    transition: color 0.3s ease;
}

.link-contato:hover,
.dados-contato a:hover {
    color: var(--cor-vermelho);
}

/* === Formulário de Contato === */
.formulario {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--cor-bg-preto);
    padding: 3.2rem 2.4rem;
    border-radius: 1.2rem;
    border: 1px solid var(--cor-cinza-escuro);
}

.linha-inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    @media (min-width: 768px) {
        flex-direction: row;

        & .grupo-input {
            width: 100%;
        }
    }
}

.campo-form {
    width: 100%;
    padding: 1.6rem;
    background-color: var(--cor-bg-cinza);
    border: 1px solid var(--cor-cinza-escuro);
    border-radius: 0.8rem;
    color: var(--cor-branco);
    font-family: inherit;
    font-size: 1.6rem;
    transition: border-color 0.3s ease;

    &:focus {
        outline: none;
        border-color: var(--cor-vermelho);
    }
}

.texto-area {
    resize: vertical;
    min-height: 12rem;
}

.label-form {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--cor-branco);
    font-size: 1.6rem;
}