/* assets/css/responsive.css */

/* Tablet e Telas Menores */
@media (max-width: 1024px) {
    :root {
        --container-width: 960px;
    }
    .section-title { font-size: 2.25rem; }
    
    /* Hero Tablet */
    .hero { padding: 140px 0 80px; min-height: auto; }
    .hero h1 { font-size: 3rem; }
    .hero-wrapper { gap: 40px; grid-template-columns: 1fr 1fr; }
    
    .service-row { gap: 40px; }
    .grid-2-cols { gap: 40px; }
    
    /* Ajuste para tablets na lista de features */
    .feature-item { grid-template-columns: 180px 1fr; }
}

/* Mobile e Tablets Verticais */
@media (max-width: 768px) {
    /* Header & Nav */
    nav { justify-content: space-between; }
    
    .nav-links {
        position: fixed;
        top: 0; /* Alterado de var(--header-height) para 0 para cobrir tudo se necessário, ou mantenha se preferir abaixo do header */
        padding-top: var(--header-height); /* Compensa a altura se usar top: 0 */
        
        right: 0; /* Fica encostado na direita */
        width: 100%; /* Ou 80% se quiser ver o fundo escurecido */
        height: 100vh; /* Altura total da tela */
        
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        
        /* O SEGREDO DA CORREÇÃO: */
        transform: translateX(100%); /* Move 100% para a direita VISUALMENTE, sem aumentar a largura da página */
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        
        box-shadow: -5px 0 20px rgba(0,0,0,0.05);
        z-index: 999; /* Garante que fica acima de tudo */
    }

    .nav-links.active {
        transform: translateX(0); /* Traz de volta para a posição original */
        /* right: 0; -> Não precisamos mais mexer no right */
    }
    
    .nav-links a {
        font-size: 1.2rem;
        font-weight: 600;
        width: 100%;
        text-align: center;
    }

    .mobile-menu-btn { display: block; }
    
    /* --- HERO MOBILE --- */
    .hero { padding: 120px 0 60px; text-align: center; }
    .hero-wrapper { 
        grid-template-columns: 1fr; /* Coluna única */
        gap: 40px; 
    }
    .hero-text h1 { font-size: 2.2rem; }
    .hero-btns { 
        justify-content: center; /* Centraliza botões no mobile */
        flex-direction: column; 
        width: 100%; 
    }
    .btn { width: 100%; }
    
    /* Services Rows & Grids Gerais */
    .service-row, 
    .service-row.reverse,
    .grid-2-cols,
    .contact-wrapper { 
        flex-direction: column;
        grid-template-columns: 1fr; /* Força grid a ser 1 coluna */
        gap: 30px; 
        text-align: left; 
        margin: 60px 0;
    }
    
    .service-visual { height: 250px; width: 100%; }

    /* Correções Específicas de Layout Mobile */
    .stats-row {
        flex-direction: column; /* Estatísticas uma embaixo da outra no mobile */
        gap: 30px;
    }

    .form-row {
        grid-template-columns: 1fr; /* Inputs um embaixo do outro */
    }

    .expertise-grid {
        grid-template-columns: 1fr; /* Lista de expertise em 1 coluna */
    }
    
    /* Lista de Features no Mobile: Stacked (Empilhado) */
    .feature-item {
        grid-template-columns: 1fr; /* Coluna única */
        gap: 5px; /* Menor gap vertical */
    }
    
    .feat-col-2 {
        padding-left: 0; /* Remove indentação se houver */
    }
    
    /* Contact */
    .contact-info, .contact-form { padding: 30px; }
    .info-item { flex-direction: row; } 
    
    /* Tipografia Geral */
    .section-padding { padding: 60px 0; }
    .page-header { padding: 130px 0 60px; }
    .page-header h1 { font-size: 2.2rem; }
}

/* Mobile Pequeno */
@media (max-width: 480px) {
    .section-title { font-size: 1.8rem; }
    .card { padding: 30px 20px; }
}