/* --- 12. RESPONSIVIDADE (MEDIA QUERIES) --- */

.nav-toggle {
    display: none;
    background: transparent;
    border: none;
    width: 28px;
    height: 22px;
    position: relative; /* Para posicionar as linhas span */
    z-index: 1001; /* Acima do menu mobile */
    transition: all 0.3s ease, width 0.4s ease, height 0.4s ease;
}

/* Estilo das 3 linhas do hamburger */
.nav-toggle span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-text);
    border-radius: 3px;
    position: absolute;
    left: 0;
    transition: all 0.3s ease;
}

/* 2. Define o novo tamanho do botão QUANDO o header tiver a classe 'header-scrolled' */
.header-scrolled .nav-toggle {
    width: 22px;  /* Largura menor (original era 28px) */
    height: 18px; /* Altura menor (original era 22px) */
}

/* 3. Ajusta as linhas de dentro do botão */
.header-scrolled .nav-toggle span {
    height: 2px; /* Linhas mais finas (original era 3px) */
}

.header-scrolled .nav-toggle.is-active span:nth-child(1) {
    /* Ajusta a translação para a nova posição (7px ao invés de 9px) */
    transform: translateY(7px) rotate(45deg);
}

.header-scrolled .nav-toggle.is-active span:nth-child(3) {
    /* Ajusta a translação para a nova posição (-7px ao invés de -9px) */
    transform: translateY(-7px) rotate(-45deg);
}

/* 4. Re-posiciona as linhas no novo tamanho (encolhido) */
.header-scrolled .nav-toggle span:nth-child(1) {
    top: 0;
}
.header-scrolled .nav-toggle span:nth-child(2) {
    top: 7px; /* (Original era 9px) */
}
.header-scrolled .nav-toggle span:nth-child(3) {
    top: 14px; /* (Original era 18px) */
}

.nav-toggle span:nth-child(1) {
    top: 0;
}
.nav-toggle span:nth-child(2) {
    top: 9px; /* Posição da linha do meio */
}
.nav-toggle span:nth-child(3) {
    top: 18px; /* Posição da linha de baixo */
}


/* --- Seção processos --- */
.process-section-mobile {
    display: none;
}



@media (max-width: 768px) {
    /* ... (suas regras de mobile/tablet permanecem aqui) ... */


    /*Configurações gerais mobile*/
    * {
        cursor: auto !important;
    }

    html.no-scroll,
    body.no-scroll {
        overflow: hidden;
    }

    .custom-cursor {
        display: none !important;
    }

    /* Ajusta o padding das seções */
    section {
        padding: 4rem 0;
    }

    /* Ajusta o tamanho do título da seção */
    .section-title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }


    /* --- Ajustes do Header e Logo --- */
    .main-header {
        /* Garante que o padding não fique muito pequeno */
        padding: 1rem 0;
    }

    .logo {
        /* Reduz o tamanho base da logo no mobile */
        max-width: 180px; 
    }

    /* Mantém a logo 'scrolled' pequena */
    .header-scrolled .logo {
        max-width: 150px; 
    }

    /* MENU TOGGLE */
    /* 1. Mostra o botão hamburger */
    .nav-toggle {
        display: block;
    }

    /* 2. Esconde o menu desktop e o transforma em menu fullscreen */
    .nav-menu {
        position: fixed;
        top: 0;
        /* Começa fora da tela (à direita) */
        right: -100%; 
        width: 100%;
        height: 100vh; /* Altura total da tela */
        
        /* Layout vertical */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem; /* Aumenta o espaço entre os links */

        /* Fundo escuro com blur */
        background-color: rgba(26, 26, 26, 0.95);
        backdrop-filter: blur(10px);
        
        /* Animação de entrada */
        transition: right 0.4s ease-in-out;
        z-index: 1000; /* Fica abaixo do botão toggle */
    }

    /* 3. Classe 'is-active' que o JS vai adicionar */
    .nav-menu.is-active {
        right: 0; /* Puxa o menu para a tela */
    }

    /* 4. Aumenta o tamanho dos links no menu aberto */
    .nav-menu a {
        font-size: 1.5rem; /* Fonte maior para fácil clique */
        font-weight: 600;
    }
    
    /* 5. Animação do Hamburger para "X" */
    .nav-toggle.is-active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .nav-toggle.is-active span:nth-child(2) {
        opacity: 0; /* Esconde a linha do meio */
    }
    .nav-toggle.is-active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    
    .hero-title {
        font-size: 2.5rem;
    }

    /* Regras para o processo no mobile */
    .process-wrapper,
    .process-wrapper.process-left,
    .process-wrapper.process-right {
        justify-content: center;
    }
    .process-step {
        width: 90%;
    }
    #timeline-svg {
        display: none;
    }

    /* --- 4. SEÇÃO HERO     --- */
    .hero-section {
        text-align: center;
        padding-top: 150px;
    }

    .hero-title {
        /* Redução significativa da fonte */
        font-size: 2rem; /* Original era 3.5rem */
        line-height: 1.3; /* Melhora a leitura em múltiplas linhas */
    }

    .hero-subtitle {
        font-size: 1.05rem; /* Original era 1.2rem */

        max-width: 95%; 
        margin-bottom: 2.5rem; 
    }

    /* --- 5. SEÇÃO SERVIÇOS     --- */
    .services-grid {
        /* Reduz o espaço entre os cards no mobile */
        gap: 1.5rem;
    }

    .service-card {
        /* Reduz o padding interno para dar mais espaço ao texto */
        padding: 2rem 1.5rem;
    }

    /* Desabilita o efeito de "pular" no toque */
    .service-card:hover {
        transform: none;
    }

    .service-icon {
        font-size: 2.2rem; /* Original: 2.5rem */
    }

    .service-card h3 {
        font-size: 1.3rem; /* Original: 1.5rem */
    }


    /* --- 6. Seção processos --- */
    .process-section-mobile {
        display: block; /* Esconde a versão mobile (accordion) */
    }
    .process-section {
        display: none; /* Mostra a versão desktop (timeline) */
    }

    
    /* --- 6. SEÇÃO PORTFÓLIO     --- */

    .portfolio-section {
        padding: 4rem 0; /* Menos padding */
    }

    /* --- Filtros --- */
    .portfolio-filters {
        /* Permite que os botões quebrem a linha */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem; /* Espaço entre os botões */
        margin-bottom: 2rem;
    }

    .filter-btn {
        margin: 0; /* Remove a margem lateral */
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }

    /* --- Grid e Itens --- */
    .portfolio-grid {
        /* Força 1 coluna no celular */
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .portfolio-item {
        /* Ajusta a altura dos cards no celular */
        height: 280px; 
    }

    /* --- EFEITO: Scroll Automático para Sites (Mobile) --- */
    
    .portfolio-item.item-type-site img {
        /* 1. Remove qualquer transição de hover do desktop */
        transition: none !important; 
        transform: translateY(0); /* Garante o estado inicial */
        
        /* 2. Aplica a animação, mas a deixa PAUSADA */
        animation-name: autoScrollImage;
        animation-duration: 30s; /* Duração (ida e volta) - ajuste como quiser */
        animation-timing-function: ease-in-out;
        animation-iteration-count: infinite; /* Loop */
        animation-play-state: paused; /* Começa pausada */
    }

    /* 3. QUANDO o JS adicionar 'is-visible', a animação RODA */
    .portfolio-item.item-type-site.is-visible img {
        animation-play-state: running;
    }

    /* 4. Pausa a animação se o usuário TOCAR no card */
    .portfolio-item.item-type-site:active img {
        animation-play-state: paused;
    }
    
    /* --- EFEITO: Mídia (Vídeo) no Mobile --- */
    
    /* O botão de play já funciona com 'click', 
       então só precisamos ajustar o tamanho */
    .video-play-btn {
        width: 60px;
        height: 60px;
        font-size: 1.2rem;
    }

    /* Opcional: Efeito de "zoom" no toque para mídias sem vídeo */
    .portfolio-item.item-type-media:active img {
         transform: scale(1.1);
    }
    
    /* Ajuste do texto do overlay */
     .portfolio-info {
        padding: 2rem 1rem 1rem;
    }
     .portfolio-info h3 { font-size: 1rem; }
     .portfolio-info p { font-size: 0.85rem; }


    /* --- 7. Seção de Depoimentos --- */

    /* 1. Ajusta o Card de Texto Principal */
    .testimonial-display-card {
        min-height: 420px; 
        padding: 2rem 1.5rem;
        margin-bottom: 2rem; 
        max-width: 90%; 
    }

    .testimonial-text {
        font-size: 1.1rem; /* Reduz o tamanho da citação */
        line-height: 1.6;
    }

    .testimonial-author cite {
        font-size: 1rem;
    }
     .testimonial-author span {
        font-size: 0.9rem;
    }

    /* 2. Ajusta o Slider */
    #testimonial-line {
        /* Garante que ocupe a largura disponível */
        width: 100%; 
        /* Reduz o gap entre setas e slider */
        gap: 10px; 
    }

    /* 3. Ajusta a "Janela" para mostrar MENOS itens */
    .testimonial-slider-container {
        width: 100%; /* << AJUSTE ESTE VALOR para o visual desejado */
    }

    /* 4. Ajusta o Tamanho do Item (opcional) */
    /* Se 180px for muito grande no celular, reduza aqui */
    .logo-item {
         width: 70px; /* Exemplo: Reduzido para 150px */
    }
    
    /* 5. Ajusta o Padding Top (se reduziu o item) */
    .testimonial-logo-grid {
        /* Mantém o espaço para a imagem vazar */
        padding-top: 0.2rem; /* Reduz um pouco */
        gap: 1rem; /* Reduz o gap se reduziu o item */
    }
    
    /* 6. Ajusta os Botões */
    .slider-btn {
        width: 35px; /* Menor */
        height: 35px; /* Menor */
        font-size: 0.5rem; /* Ícone menor */
    }


    





    /* --- 8. SEÇÃO FORMULÁRIO     --- */

    .contact-wrapper {
        /* 1. Força o layout de coluna no mobile */
        flex-direction: column;

        /* 2. Reduz o padding para o conteúdo respirar */
        padding: 1.5rem;
        
        /* 3. Reduz o espaço entre os blocos (info e form) */
        gap: 2rem;
    }

    .contact-info h3 {
        /* 4. Ajusta levemente o título */
        font-size: 1.5rem; 
    }
    
}


/* --- Keyframes da Animação de Scroll Mobile --- */
@keyframes autoScrollImage {
    0% {
        transform: translateY(0);
    }
    50% {
        /* Usa a variável --scroll-distance definida pelo JS */
        transform: translateY(var(--scroll-distance, 0px)); 
    }
    100% {
        transform: translateY(0); /* Volta para o início */
    }
}