/* ========================================================================= */
/* RESPONSIVIDADE                             */
/* ========================================================================= */


/* 1. MÍDIA QUERY PARA TABLETS (Telas até 1200px) */
@media (max-width: 1200px) {
    /* Ajusta o padding horizontal do cabeçalho e das seções */
    .header {
        padding: 2rem 5%;
    }
    section {
        padding: 10rem 5% 10rem;
    }
}

/* ------------------------------------------------------------------------- */

/* 2. MÍDIA QUERY PARA TABLETS PEQUENOS E DISPOSITIVOS MÉDIOS (Telas até 991px) */
@media (max-width: 991px) {
    /* Reduz o tamanho da fonte do título principal */
    .heading {
        font-size: 6rem;
        margin: 3rem 0;
    }

    /* Reduz o espaçamento e o tamanho do conteúdo da seção Home */
    .home {
        gap: 8rem; /* Reduz o espaçamento entre o conteúdo e a imagem */
    }
    .home-content h1 {
        font-size: 5.5rem; /* Título H1 menor */
    }
    .home-content h3 {
        font-size: 3rem; /* Título H3 menor */
    }
    .home-img img {
        width: 40vw; /* Imagem um pouco maior para telas menores que desktop */
    }

    /* --- Seção ABOUT --- */
    .about {
        gap: 6rem; /* Reduz o espaço entre a imagem e o conteúdo */
    }
    .about-img img {
        width: 40vw; /* Aumenta a imagem para preencher melhor o espaço */
    }
    .about-content h2 {
        font-size: 3.5rem; /* Reduz o tamanho do título principal */
    }
    .about-content h3 {
        font-size: 2.2rem;
    }

    /* --- Seção SKILLS --- */
    .skill-main {
        /* Muda de 2 colunas para 1 coluna em telas de tablet */
        grid-template-columns: 1fr; 
        grid-column-gap: 0;
    }
    .skill-main h3 {
        margin-bottom: 1.5rem;
    }

    /* Oculta ou simplifica a seção "Professional" (Gráficos circulares) 
        Pois é difícil de manter em layouts estreitos e ocupa muito espaço.
       Se quiser manter, use flexbox ou grid de 1 coluna. */
    .professional {
        margin-top: 5rem;
        /* Altera de 2 colunas para 1 coluna para empilhar os gráficos */
        grid-template-columns: 1fr;
    }
    .box {
        margin: 20px auto; /* Centraliza o box */
        max-width: 300px;
    }


    /* --- Seção SERVICES --- */
    .services-container {
        /* Muda de 3 colunas para 2 colunas */
        grid-template-columns: repeat(2, 1fr);
    }
    .service-box {
        height: 400px; /* Reduz a altura da caixa de serviço */
    }
    .service-info {
        padding: 3rem; /* Reduz o padding interno */
    }
    .service-info h4 {
        font-size: 3rem; /* Reduz o tamanho do título do serviço */
    }
    .service-info i {
        font-size: 6rem; /* Reduz o tamanho do ícone */
    }

    /* --- Seção PORTFOLIO --- */
    .portfolio .portfolio-container {
        /* Muda de 3 colunas para 2 colunas */
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    .portfolio-container .portfolio-box {
        height: 400px; /* Reduz a altura da caixa de projeto */
    }
    .portfolio-note {
        max-width: 90%; /* Aumenta a largura da nota */
        font-size: 1.8rem;
    }

    /* --- Seção TESTIMONIALS --- */
    .wrapper {
        /* Se estiver usando um slider, esta regra pode ser ignorada.
           Caso contrário, empilha os depoimentos */
        grid-template-columns: 1fr; 
        gap: 3rem;
    }
    .testimonial-item {
        margin: 0 auto; /* Centraliza o item */
        max-width: 550px; /* Limita a largura em tablets */
        min-height: 450px;
    }
    .testimonials-box img {
        width: 15rem;
    }

    /* --- Seção CONTACT --- */
    .contact form {
        gap: 2rem;
        flex-direction: column; /* Empilha os campos */
        margin: 3rem auto;
    }
    /* Oculta o input-box lateral e mantém o formato principal (se o HTML for simples) */
    .contact form .input-box {
        width: 100%; /* Ocupa toda a largura */
    }
    .contact form .input-box input,
    .contact form textarea {
        padding: 1.5rem; /* Reduz o padding interno dos campos */
        margin: 1rem 0;
        font-size: 1.6rem;
    }

    /* --- Rodapé (Footer) --- */
    .footer ul {
        font-size: 16px; /* Reduz o tamanho da fonte dos links */
    }
}

/* ------------------------------------------------------------------------- */

/* 3. MÍDIA QUERY PARA MOBILE (Telas até 768px) */
@media (max-width: 768px) {
    /* Mostra o ícone do menu e oculta a navegação principal */
    #menu-icon {
        display: block; /* Ícone do menu aparece */
    }
    .navbar {
        /* Oculta a navegação (ela será exibida via JavaScript quando o ícone for clicado) */
        position: absolute;
        top: 100%; /* Abaixo do header */
        right: 0;
        width: 50%;
        padding: 1rem 5%;
        background: rgba(0, 0, 0, 0.9); /* Fundo escuro para o menu */
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--main-color);
        border-bottom-left-radius: 2rem;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);
        display: none; /* Inicia oculto */
        flex-direction: column;
        align-items: flex-start;
        transition: all 0.3s ease;
    }
    /* Classe para mostrar o menu via JS */
    .navbar.active {
        display: flex;
    }

    .navbar a {
        display: block; /* Links ocupam toda a largura */
        margin: 1.5rem 0;
        font-size: 2rem;
        border-bottom: none; /* Remove a borda para mobile */
    }
    .navbar a:hover,
    .navbar a.active {
        color: var(--main-color);
        border-bottom: none;
    }

    /* Move o seletor de idioma para dentro do menu (opcional) */
    .language-switcher {
        margin: 1.5rem 0 0;
    }


    /* Layout da seção HOME: Inverte a ordem e empilha verticalmente */
    .home {
        flex-direction: column-reverse; /* Conteúdo em cima, Imagem embaixo */
        gap: 4rem; /* Reduz o espaçamento */
    }

    /* Ajusta a imagem e o conteúdo */
    .home-content {
        align-items: center; /* Centraliza o conteúdo */
        text-align: center; /* Centraliza o texto */
    }

    .home-content h1, 
    .home-content h3 {
        line-height: 1.2;
    }

    .home-img img {
        width: 50vw; /* Aumenta o tamanho da imagem em mobile */
        margin-top: 2rem;
    }
    
    /* Centraliza os botões e ícones sociais */
    .btn-group,
    .social-icons {
        justify-content: center;
        width: 100%;
    }
    .social-icons a {
        margin: 2rem 1rem 3rem 0; /* Ajusta a margem */
    }

    /* --- Seção ABOUT: Empilhamento Vertical --- */
    .about {
        flex-direction: column-reverse; /* Conteúdo em cima, Imagem embaixo */
        text-align: center;
    }
    .about-content {
        align-items: center; /* Centraliza itens de conteúdo, se houver */
    }
    .about-content h2 {
        text-align: center; /* Centraliza o título */
        line-height: 1.2;
    }
    .about-content p {
        margin: 1.5rem 0 2rem;
    }
    .about-img img {
        width: 60vw; /* Tamanho da imagem maior em mobile */
        margin-top: 2rem;
    }
    
    /* --- Seção EDUCATION (Timeline) para Coluna Única --- */
    .timeline-items::before {
        left: 20px; /* Move a linha vertical para a esquerda */
    }
    .timeline-item {
        /* Garante que todos os itens tenham a mesma margem */
        padding-left: 50px; 
    }
    /* Remove o padding e alinhamento específicos de 'odd' e 'even' */
    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even){
        padding-right: 0;
        padding-left: 50px;
        text-align: left;
    }
    /* Move o ponto de destaque para o lado da nova linha */
    .timeline-dot {
        left: 17px; 
    }

    /* Ajusta a box do conteúdo para a nova posição */
    .timeline-content {
        padding: 20px 30px; /* Reduz o padding interno */
    }
    .timeline-date {
        margin: 0 0 10px; /* Ajusta a margem da data */
    }

    /* --- Seção SKILLS --- */
    /* Já está em 1 coluna devido à regra de 991px */
    .skill-bar {
        margin-bottom: 2rem;
    }
    .skill-main h3 {
        font-size: 2.5rem;
    }
    .skills-note {
        font-size: 1.8rem;
    }

    /* --- Seção SERVICES --- */
    .services-container {
        /* Muda de 2 colunas para 1 coluna */
        grid-template-columns: 1fr;
    }
    .service-box {
        height: auto; /* Deixa a altura se ajustar ao conteúdo */
        min-height: 300px; /* Garante uma altura mínima */
    }
    .service-info h4 {
        font-size: 2.5rem;
    }
    .service-info p {
        font-size: 1.5rem;
    }

    /* --- Seção PORTFOLIO --- */
    .portfolio .portfolio-container {
        /* Muda de 2 colunas para 1 coluna */
        grid-template-columns: 1fr;
    }
    .portfolio-container .portfolio-box {
        height: 350px;
    }
    .infor-portfolio p,
    .infor-portfolio span {
        font-size: 1.8rem; /* Reduz o texto do overlay */
    }

    /* --- Seção TESTIMONIALS: Empilhamento Vertical (100% da Largura) --- */
    .wrapper {
        /* Define como grid de uma única coluna. */
        display: flex;
        flex-direction: column;
    }
    .testimonial-item h2 {
        font-size: 2.4rem;
    }
    .testimonial-item p {
        font-size: 1.2rem;
    }

    /* --- Botão WhatsApp --- */
    #whatsapp .wtsapp {
        /* Reduz o tamanho do botão para ser menos invasivo em telas pequenas */
        width: 45px;
        height: 45px;
        line-height: 45px;
        font-size: 24px;
        bottom: 60px; /* Sobe um pouco a posição */
        right: 15px; /* Move um pouco para a esquerda */
    }
    #whatsapp .wtsapp::before {
        /* Ajusta o efeito de pulsação para o novo tamanho */
        width: 55px;
        height: 55px;
    }

    /* --- Rodapé (Footer) --- */
    .footer .social a {
        /* Reduz o tamanho dos ícones sociais */
        font-size: 22px;
        width: 38px;
        height: 38px;
        line-height: 38px;
        margin: 0 8px;
    }

    .footer ul li {
        /* Reduz o padding entre os links do menu */
        padding: 0 10px;
    }

    .footer .copyright {
        margin-top: 30px; /* Reduz a margem superior */
        font-size: 14px;
    }
}

/* ------------------------------------------------------------------------- */

/* 4. MÍDIA QUERY PARA SMARTPHONES PEQUENOS (Telas até 480px) */
@media (max-width: 480px) {
    /* Reduz o tamanho de fontes importantes */
    .logo {
        font-size: 2.5rem;
    }
    .heading {
        font-size: 5rem;
    }
    .home-content h1 {
        font-size: 4rem;
    }
    .home-content h3 {
        font-size: 2.5rem;
    }
    .text-animation {
        font-size: 28px; /* Reduz a fonte da animação de texto */
    }
    .home-content p {
        font-size: 1.4rem;
    }

    /* Reduz o tamanho da imagem Home */
    .home-img img {
        width: 65vw;
    }

    /* Torna os botões menores */
    .btn {
        padding: 0.8rem 2.2rem;
        font-size: 1.4rem;
    }
    .btn-group {
        flex-direction: column; /* Empilha os botões */
        gap: 1rem;
    }

    /* --- Seção ABOUT --- */
    .about-img img {
        width: 70vw;
    }
    .about-content h2 {
        font-size: 3rem;
    }
    .about-content h3 {
        font-size: 2rem;
    }
    .text-animation1 {
        font-size: 28px;
        min-width: 200px; /* Pode ser necessário ajustar o min-width */
    }
    
    /* --- Seção EDUCATION --- */
    .timeline-content h3 {
        font-size: 18px;
    }
    .timeline-content p {
        font-size: 14px;
    }

    /* --- Seção SKILLS --- */
    /* Já em 1 coluna */
    .skill-bar .info p {
        font-size: 1.3rem; /* Fonte um pouco menor */
    }

    /* --- Seção SERVICES --- */
    .service-info {
        padding: 2rem; /* Reduz ainda mais o padding */
    }
    .service-info h4 {
        font-size: 2rem;
    }

    /* --- Seção PORTFOLIO --- */
    .portfolio-note {
        font-size: 1.6rem;
    }

    /* --- Seção CONTACT --- */
    .contact form {
        width: 90%;
    }
    .contact form .input-box input,
    .contact form textarea {
        padding: 1rem;
    }

    /* --- Rodapé (Footer): Quebra de linha nos links --- */
    .footer ul {
        display: flex;
        flex-direction: column; /* Empilha os links de navegação */
        gap: 10px;
    }
    .footer ul li {
        display: block; /* Garante que cada item ocupe sua própria linha */
        padding: 0;
    }
}