/* =========================================================
   MOBILE FIRST (até 767px)
   ========================================================= */
@media (max-width: 767px) {

    body {
        overflow-x: hidden;
    }

    /* Remove travas que quebram mobile */
    .top,
    .center {
        min-width: 0;
        height: auto;
    }

    .container {
        min-height: auto;
    }

    /* Corrige bug do 100vh no mobile */
    .top {
        min-height: 100svh;
        flex-direction: column;
    }

    /* Imagens responsivas */
    .img-projeto img {
        width: 100%;
        max-width: 280px;
        height: auto;
    }

    .img-user img {
        width: 120px;
        height: auto;
    }

    .servicos-box {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .item-servico {
        height: auto;
        min-height: 160px;
    }
}


/* =========================================================
   TABLET (768px até 999px)
   ========================================================= */
@media (min-width: 768px) and (max-width: 999px) {

    .top {
        height: auto;
        flex-direction: column;
    }

    .center {
        height: auto;
        flex-direction: row;
    }

    .servicos-box {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =========================================================
   EFEITOS GERAIS (desktop apenas interativo)
   ========================================================= */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (hover: hover) {
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(29, 42, 223, 0.2);
    }
}


/* =========================================================
   DESKTOP (1000px ou mais)
   ========================================================= */
@media (min-width: 1000px) {

    body {
        min-height: 100vh;
        overflow-y: auto;
    }

    /* Widget 1 */
    .top {
        width: 100%;
        height: 40vh;
        flex-direction: row;
    }

    .user {
        width: 70%;
        height: 100%;
    }

    .info-user h1 { font-size: 1.8rem; }
    .info-user span { font-size: 1.5rem; }
    .info-user p { font-size: 1.2rem; }

    .projeto {
        width: 30%;
        height: 100%;
    }

    /* Widget 2 */
    .center {
        width: 100%;
        height: 10vh;
        flex-direction: row;
    }

    .redes-sociais {
        width: 30%;
        height: 100%;
    }

    .skills {
        width: 70%;
        height: 100%;
    }

    /* Widget 3 */
    .bottom {
        width: 100%;
        height: 40vh;
        flex-direction: row-reverse;
    }

    .contato {
        width: 30%;
        height: 100%;
    }

    .servicos {
        width: 70%;
        height: 100%;
    }

    .servicos-box {
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
    }

    .item-servico {
        height: 250px;
    }

    .item-servico i { font-size: 3rem; }
    .item-servico span { font-size: 1.2rem; }
}