@media(max-width: 1200px){
   main{
    width: 100%;

    flex-direction: column;
    align-items: center;
    justify-content: center;
   }

   main .main-content{
    width: 100%;
    align-items: center;
  
    margin-bottom: 15%;
   }

   main .main-content .text, .techs{
    text-align: center;
   }

   main .main-content .text p{
    width: 100%;
    font-size: 0.9em;
   }

    main .techs .cards-container, .main-content .text{
        margin-top: 32px;
    }
}

/* =========================================
   VERSÃO MOBILE (CELULAR) - FINAL DO ARQUIVO
   ========================================= */
@media (max-width: 900px) {

    /* 1. DESTRAVAR A ROLAGEM (Obrigatório) */
    html, body {
        overflow-y: auto !important; /* Força a barra de rolagem aparecer */
        height: auto !important;     /* Permite o site crescer */
        min-height: 100vh;          
    }

    /* 2. LAYOUT EM COLUNA */
    .layout-container {
        flex-direction: column;
        height: auto !important;
        overflow: visible !important;
    }

    /* 3. BARRA LATERAL */
    .sidebar {
        width: 100%;
        height: auto;
        position: relative;
        padding: 20px;
        overflow: visible; 
    }

    /* --- TRUQUE DE MESTRE: ESCONDER TEXTO LONGO NO MOBILE --- */

    .sidebar .about-me {
        display: none; 
    }

    .sidebar .avatar {
        width: 120px;
        height: 120px;
        margin-bottom: 10px;
    }

    /* 4. CONTEÚDO PRINCIPAL */
    .main-content {
        width: 100%;
        height: auto;
        overflow: visible;
        padding: 20px;
        padding-bottom: 80px; 
    }

 
    .projects-grid {
        grid-template-columns: 1fr;
    }
}