body {
    transition: background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s ease;
    background-color: var(--bg-body);
}

/* Garante que o AOS não quebre o layout flex */
[data-aos] {
    pointer-events: none;
}

[data-aos].aos-animate {
    pointer-events: auto;
}

.container {
    width: 100%;
    min-height: 1360px;
    overflow-x: hidden;
    position: relative;
    background-color: var(--bg-body);
}

/* Portfolio e Projetos com gradiente variável */
.portfolio-link,
.projeto {
    background: var(--card-gradient) !important;
    border: 1px solid var(--card-border) !important;
    transition: transform 0.3s ease, background 0.5s ease;
}

/* Previne que o card saia da tela ao dar o scale */
.section-links,
.section-projetos-recentes,
.section-conectese {
    perspective: 1000px;
}

/* Deixa a transição de cores do Dark Mode suave junto com a GSAP */
.portfolio-link,
.projeto,
.card-contato {
    will-change: transform, opacity;
}

/* Remove o foco azul feio em volta dos botões ao clicar */
button:focus,
a:focus {
    outline: none;
}

/* Estilo do botão de tema */
.theme-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--card-bg);
    border: 1.5px solid var(--card-border);
    padding: 10px;
    border-radius: 12px;
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-btn img {
    width: 24px;
    height: 24px;
}

/* Ajuste sutil de brilho no dark mode se necessário */
body.dark-mode .theme-btn {
    --icon-brightness: 1.5;
}

/* Header */
.section-perfil {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 25px;

    position: relative;
    width: calc(100% - 20px);
    height: auto;
    left: 20px;
    top: 80px;
}

.foto-perfil {
    width: 100px;
    height: 100px;

    overflow: hidden;

    border-radius: 100%;

    flex: none;
    order: 0;
    flex-grow: 0;

    & img {
        position: absolute;
        width: 120px;
        height: 160px;
        left: calc(50% - 120px/2);
        top: calc(50% - 160px/2 + 12px);
    }
}

.info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 25px;

    width: 100%;
    height: auto;

    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;

    & h1 {
        width: 100%;
        height: 25px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 600;
        font-size: 36px;
        line-height: 40px;

        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;

        color: var(--text-main);

        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    & p {
        width: 85%;
        height: auto;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 500;
        font-size: 16px;
        line-height: 24px;
        display: flex;
        align-items: center;

        color: var(--text-secondary);

        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
}

/* Links */

.section-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 0px;
    gap: 20px;

    position: relative;
    width: 100%;
    height: auto;
    left: 0px;
    top: 100px;

    overflow: hidden;
}

/* Portfolio */

.portfolio-link {
    width: 370px;
    height: 210px;

    border-radius: 24px;

    overflow: hidden;

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.icon-portfolio {
    position: relative;
    width: 99px;
    height: 103.28px;
    left: 20px;
    top: 20px;

    opacity: 0.2;
    filter: blur(1px);
}

.text-portfolio {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    position: relative;
    width: 150px;
    height: auto;
    left: 30px;
    top: 44px;

    & span {
        width: 100%;
        height: 14px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 500;
        font-size: 24px;
        line-height: 40px;

        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;

        color: var(--text-main);

        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    & p {
        width: 100%;
        height: 8px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 40px;

        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;
        text-align: center;

        color: var(--card-border);

        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
}

.iconContainer {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;

    position: relative;
    width: 28px;
    height: 28px;
    left: 330px;
    bottom: 125px;

    border-radius: 100%;
}

/* Divisor de projetos */

.divisor-projetos {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 180px;

    width: 360px;
    height: 36px;

    flex: none;
    order: 1;
    flex-grow: 0;

    & h1 {
        width: auto;
        height: 11px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;

        color: var(--text-main);

        flex: none;
        order: 0;
        flex-grow: 0;
    }

    & img {
        width: 20px;
        height: 20px;

        flex: none;
        order: 1;
        flex-grow: 0;

    }
}

/* Projetos recentes */

.section-projetos-recentes {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 10px;

    width: 370px;
    height: 164px;

    flex: none;
    order: 2;
    flex-grow: 0;
}

.projeto {
    width: 180px;
    height: 164px;

    border-radius: 16px;

    flex: none;
    order: 0;
    flex-grow: 0;

    overflow: hidden;

    & .icon-projeto {
        position: relative;
        width: 30px;
        height: 30px;
        left: 15px;
        top: 15px;
    }
}

.info-projeto {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 8px;

    position: relative;
    width: 140px;
    height: 64px;
    left: 15px;
    top: 40px;

    & h1 {
        width: auto;
        height: 14px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 500;
        font-size: 20px;
        line-height: 30px;

        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;

        color: var(--text-main);

        flex: none;
        order: 0;
        align-self: stretch;
        flex-grow: 0;
    }

    & p {
        width: auto;
        height: 42px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 300;
        font-size: 8px;
        line-height: 12px;

        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;

        color: var(--text-secondary);

        flex: none;
        order: 1;
        align-self: stretch;
        flex-grow: 0;
    }
}

.ContainerIconProjeto {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 10px;

    position: relative;
    width: 16px;
    height: 16px;
    left: 150px;
    bottom: 90px;

    border-radius: 100%;

    & img {
        width: 5.26px;
        height: 5.26px;
    }
}

/* Divisor de contato */

.divisor-conectse {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 180px;

    width: 360px;
    height: 36px;

    flex: none;
    order: 3;
    flex-grow: 0;

    & h1 {
        width: auto;
        height: 11px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 400;
        font-size: 16px;
        line-height: 24px;
        leading-trim: both;
        text-edge: cap;
        display: flex;
        align-items: center;

        color: var(--text-main);

        flex: none;
        order: 0;
        flex-grow: 0;
    }

    & img {
        width: 20px;
        height: 20px;

        flex: none;
        order: 1;
        flex-grow: 0;

    }
}

/* Contatos */

.section-conectese {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    gap: 13px;

    width: 370px;
    height: 230px;

    flex: none;
    order: 4;
    flex-grow: 0;

}

.card-contato {
    box-sizing: border-box;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 8px 8px 8px 12px;
    gap: 150px;

    width: 370px;
    height: 68px;

    border: 1px solid rgba(154, 152, 148, 0.12);
    border-radius: 12px;

    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;

    & .info-contato {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 20px;

        margin: 0 auto;
        width: 172px;
        height: 52px;

        flex: none;
        order: 0;
        flex-grow: 0;

        & .icon-contato {
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            padding: 9.75px;
            gap: 9.75px;

            width: 52px;
            height: 52px;

            background: linear-gradient(135deg, #066FD5 0%, #003FFF 100%);
            border-radius: 13px;

            flex: none;
            order: 0;
            flex-grow: 0;
        }

        & .text-contato {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: flex-start;
            padding: 0px;
            gap: 4px;

            width: auto;
            height: 24px;

            flex: none;
            order: 1;
            flex-grow: 0;

            & strong {
                width: auto;
                height: 14px;

                font-family: var(--font-poppins);
                font-style: normal;
                font-weight: 600;
                font-size: 20px;
                line-height: 24px;

                leading-trim: both;
                text-edge: cap;
                display: flex;
                align-items: center;

                color: var(--text-main);

                flex: none;
                order: 0;
                align-self: stretch;
                flex-grow: 0;
            }

            & p {
                width: auto;
                height: 6px;

                font-family: var(--font-poppins);
                font-style: normal;
                font-weight: 300;
                font-size: 8px;
                line-height: 40px;

                leading-trim: both;
                text-edge: cap;
                display: flex;
                align-items: center;
                text-align: center;

                color: var(--text-secondary);

                flex: none;
                order: 1;
                flex-grow: 0;
            }
        }

    }
}

.arrowIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 7.98713px;
    gap: 7.99px;

    margin: 0 auto;
    width: 22px;
    height: 22px;

    border-radius: 50%;

    flex: none;
    order: 1;
    flex-grow: 0;

    & img {
        width: 8px;
        height: 8px;

        flex: none;
        order: 0;
        flex-grow: 0;

    }
}

/* Footer */

.footer {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;

    backdrop-filter: blur(2px);
}

.feitopor {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 12px;

    position: absolute;
    width: 224px;
    height: 28px;
    left: calc(50% - 224px/2);
    top: calc(50% - 28px/2);

    & h1 {
        width: auto;
        height: 26px;

        font-family: var(--font-poppins);
        font-style: normal;
        font-weight: 500;
        font-size: 17.5px;
        line-height: 26px;
        display: flex;
        align-items: center;
        text-align: center;

        color: var(--text-secondary);

        flex: none;
        order: 0;
        flex-grow: 0;
    }

    & .logoSalesDev {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 0px;
        gap: 8px;

        width: 135px;
        height: 28px;

        flex: none;
        order: 1;
        flex-grow: 0;

        & img {
            width: 28px;
            height: 28px;

            flex: none;
            order: 0;
            flex-grow: 0;
        }

        & strong {
            width: auto;
            height: 23px;

            font-family: var(--font-plus);
            font-style: normal;
            font-weight: 400;
            font-size: 18.2px;
            line-height: 23px;

            text-align: center;
            text-transform: uppercase;

            color: var(--text-main);

            flex: none;
            order: 1;
            flex-grow: 0;

            & span {
                font-weight: 800;
            }
        }
    }
}

/* Responsivo

/* TABLET (768px a 1023px) */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Header */
    .section-perfil {
        width: calc(100% - 360px);
        height: auto;
        left: 200px;
        top: 80px;
    }

    /* Portfolio */

    .portfolio-link {
        width: 515px;
        height: 223px;
    }

    .icon-portfolio {
        left: 30px;
        top: 30px;
    }

    .text-portfolio {
        left: 40px;
        top: 55px;
    }

    .iconContainer {
        left: 470px;
        bottom: 125px;
    }

    /* Projetos recentes */

    .section-projetos-recentes {
        gap: 20px;

        width: 515px;
    }

    .projeto {
        width: 247.5px;
        height: 164px;

        & .icon-projeto {
            left: 20px;
            top: 20px;
        }
    }

    .info-projeto {
        left: 20px;
        top: 40px;
    }

    .ContainerIconProjeto {
        width: 20px;
        height: 20px;
        left: 215px;
        bottom: 90px;

        & img {
            width: 8px;
            height: 8px;
        }
    }

    /* Contatos */

    .section-conectese {
        width: 515px;
        height: auto;
    }

    .card-contato {
        gap: 290px;

        width: 515px;
    }
}

/* DESKTOP / NOTEBOOK (≥1024px) */
@media (min-width: 1280px) {

    /* Header */
    .section-perfil {
        width: calc(100% - 765px);
        height: auto;
        left: calc(50% - (100% - 765px)/2);
        top: 80px;
    }

    /* Portfolio */

    .portfolio-link {
        width: 515px;
        height: 223px;
    }

    .icon-portfolio {
        left: 30px;
        top: 30px;
    }

    .text-portfolio {
        left: 40px;
        top: 55px;
    }

    .iconContainer {
        left: 470px;
        bottom: 125px;
    }

    /* Projetos recentes */

    .section-projetos-recentes {
        gap: 20px;

        width: 515px;
    }

    .projeto {
        width: 247.5px;
        height: 164px;

        & .icon-projeto {
            left: 20px;
            top: 20px;
        }
    }

    .info-projeto {
        left: 20px;
        top: 40px;
    }

    .ContainerIconProjeto {
        width: 20px;
        height: 20px;
        left: 215px;
        bottom: 90px;

        & img {
            width: 8px;
            height: 8px;
        }
    }

    /* Contatos */

    .section-conectese {
        width: 515px;
        height: auto;
    }

    .card-contato {
        gap: 290px;

        width: 515px;
    }

    /* Footer */

    .feitopor {

        left: calc(50% - 224px/2 + 450px);
    }

}

/* TELAS GRANDES (≥1700px) */

@media (min-width: 1700px) {


    /* Header */
    .section-perfil {
        width: calc(100% - 1325px);
        height: auto;
        left: calc(50% - (100% - 1325px)/2);
        top: 80px;
    }

    /* Portfolio */

    .portfolio-link {
        width: 515px;
        height: 223px;
    }

    .icon-portfolio {
        left: 30px;
        top: 30px;
    }

    .text-portfolio {
        left: 40px;
        top: 55px;
    }

    .iconContainer {
        left: 470px;
        bottom: 125px;
    }

    /* Projetos recentes */

    .section-projetos-recentes {
        gap: 20px;

        width: 515px;
    }

    .projeto {
        width: 247.5px;
        height: 164px;

        & .icon-projeto {
            left: 20px;
            top: 20px;
        }
    }

    .info-projeto {
        left: 20px;
        top: 40px;
    }

    .ContainerIconProjeto {
        width: 20px;
        height: 20px;
        left: 215px;
        bottom: 90px;

        & img {
            width: 8px;
            height: 8px;
        }
    }

    /* Contatos */

    .section-conectese {
        width: 515px;
        height: auto;
    }

    .card-contato {
        gap: 290px;

        width: 515px;
    }

    /* Footer */

    .feitopor {
        left: calc(50% - 224px/2 + 700px);
    }
}