@media (max-width: 768px) {
    /* OCULTA O MENU DESKTOP */
    nav.desktop-nav {
        display: none;
    }

    /* EXIBE O BOTÃO HAMBURGUER */
    .hamburger-menu {
        display: block;
        align-self: flex-end; /* Alinha o botão hamburger à direita no header */
        margin-top: 10px; /* Adiciona margem superior para espaçamento */
    }

    /* HEADER - AJUSTES MOBILE */
    header .header-container {
        flex-direction: column; /* Empilha header-container verticalmente em mobile */
        align-items: flex-start; /* Alinha itens à esquerda no header-container */
        position: relative; /* **ADICIONADO: position relative no container do header** */
    }

    /* EXIBE O MENU MOBILE (VERTICAL) */
    nav.mobile-nav {
        display: none; /* Inicialmente oculto */
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #222840;
        z-index: 100;
        padding: 80px 20px 20px;
        text-align: center;
        box-shadow: none;
        overflow-y: auto;
    }

    nav.mobile-nav.active {
        display: block;
    }

    nav.mobile-nav ul {
        list-style: none;
        padding: 0;
        margin: 0;
        flex-direction: column; /* Itens em coluna */
        align-items: center; /* Centraliza os itens */
    }

    nav.mobile-nav li {
        margin-bottom: 20px; /* Espaçamento entre os itens */
    }

    nav.mobile-nav a {
        display: block; /* Links ocupam toda a largura */
        color: #E5E5E5;
        text-decoration: none;
        padding: 15px 20px;
        border-radius: 8px;
        border: 2px solid #E5E5E5;
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    nav.mobile-nav a:hover {
        background-color: #FCA311;
        color: #000000;
    }

    /* AJUSTE TAMANHO DOS TÍTULOS DAS SEÇÕES */
    #sobre-mim h2,
    #habilidades h3,
    #projetos h2,
    #contato h2 {
        font-size: 1.5em; /* Reduzi o tamanho dos títulos principais */
    }

    .projeto-card h3 {
        font-size: 0.8em; /* Reduzi o tamanho dos títulos dos cards de projetos */
        margin-bottom: 8px; /* Adicionado espaçamento para evitar sobreposição */
    }

    .hero h1 {
        font-size:2.0em; /* Reduzi o tamanho do título Hero */
    }

    .hero p {
        font-size:1em;/* Reduzi o tamanho do título Hero */
    }

    /* SEÇÃO SOBRE MIM - LAYOUT VERTICAL EM MOBILE */
    .sobre-mim-conteudo-superior {
        grid-template-columns: 1fr; /* Mantenha uma coluna em telas menores */
    }

    .sobre-mim-esquerda {
        width: 100%; /* Ocupa toda a largura */
        padding-right: 0; /* Remove padding lateral */
        margin-bottom: 30px; /* Espaçamento abaixo do texto */
    }

    .sobre-mim-direita {
        width: 80%; /* Reduzi um pouco a largura da foto em mobile */
        margin: 0 auto; /* Centraliza a foto */
    }

    .foto-circular-container {
        max-width: 350px; /* Reduzi o tamanho máximo do container da foto */
    }

    /* SEÇÃO HABILIDADES - AJUSTE CARDS CORTANDO - REDUÇÃO MAIS AGRESSIVA */
    #sobre-mim ul.lista-habilidades {
        grid-template-columns: 1fr; /* **ALTERADO**: Uma coluna em mobile */
        gap: 15px; /* Reduzi ainda mais o gap */
    }

    #sobre-mim ul.lista-habilidades li {
        padding: 20px; /* Aumentei um pouco o padding VERTICAL dos cards para "respiro" */
        flex-direction: column; /* **ALTERADO**: Itens em coluna dentro do card */
        text-align: center; /* Centraliza texto nos cards */
        align-items: center; /* Centraliza itens verticalmente nos cards */
    }

    #sobre-mim ul.lista-habilidades li .icone-habilidade {
        font-size: 2.5em; /* Aumentei um pouco o ícone */
        margin-right: 0; /* Removi margin right do icone */
        margin-bottom: 10px; /* Adicionei margin bottom para icone */
        width: auto; /* Removi width fixo do icone */
    }

    #sobre-mim ul.lista-habilidades li .nome-habilidade {
        font-size: 1.2em; /* Aumentei um pouco a fonte do nome */
        margin-right: 0; /* Removi margin right do nome */
    }

    #sobre-mim ul.lista-habilidades li .nivel-habilidade {
        justify-content: center; /* Centraliza os círculos de nível */
    }

    .contato-item p {
        font-size: 0.em;
    }
    
    yoda-quote p {
        font-size: 0.7em;
    }

    .profile-container {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }

    .sobre-mim-texto {
        padding: 20px;
    }

    .force-meter {
        height: 20px;
    }

    .force-text {
        font-size: 0.7em;
    }

    .fixed-nav {
        padding: 0.5rem;
    }

    .nav-logo {
        font-size: 1.2rem;
    }

    /* Ajustes para a seção de projetos */
    .projetos-grid {
        grid-template-columns: 1fr; /* Uma coluna em mobile */
    }

    .projeto-card img {
        height: auto; /* Ajusta a altura da imagem para caber no card */
        max-height: 200px; /* Limite a altura máxima da imagem */
    }

    .projeto-card p {
        font-size: 0.7em; /* Reduzi o tamanho da fonte para evitar sobreposição */
        line-height: 1.4; /* Melhor espaçamento entre linhas */
        margin-bottom: 10px; /* Garantir espaço acima do botão */
    }
}

@media (max-width: 480px) {
    .profile-container {
        width: 250px;
        height: 250px;
    }

    .sw-button {
        padding: 10px 20px;
        font-size: 0.8rem;
    }

    .sobre-mim-texto p {
        font-size: 1em;
        line-height: 1.6;
    }
}