/* ============================================================
   RODAPÉ AVANÇADO - GRID HÍBRIDO (ECONOMIA DE ESPAÇO)
   ============================================================ */
   @media (max-width: 1024px) {

    #main-footer {
        padding-top: 0; /* A onda já dá o espaço */
    }

    .footer-content {
        padding: 40px 20px 20px 20px;
    }

    /* O GRID MÁGICO */
    .footer-grid {
        display: grid !important;
        /* Cria 2 colunas de tamanho igual */
        grid-template-columns: 1fr 1fr !important; 
        /* Gap Vertical maior (40px) e Horizontal menor (20px) */
        gap: 40px 20px !important; 
        text-align: left;
    }

    /* 1. A MARCA (Logo + Texto) - Ocupa 100% no topo */
    .brand-col {
        grid-column: 1 / -1; /* Vai da linha 1 até a última (Full Width) */
        text-align: center;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        padding-bottom: 30px;
        margin-bottom: 10px;
    }

    .brand-col p {
        margin: 15px auto;
        max-width: 400px; /* Evita que o texto fique muito largo em tablets */
        font-size: 0.95rem !important;
    }

    .social-links {
        justify-content: center; /* Centraliza ícones */
    }

    /* 2. LINKS DE NAVEGAÇÃO (Ficam lado a lado, 1 por coluna) */
    /* Não precisa de CSS extra aqui, o grid 1fr 1fr já faz eles ficarem lado a lado */
    
    .footer-col h4 {
        font-size: 1.1rem;
        margin-bottom: 20px;
        color: #fff;
    }

    .footer-links li a {
        padding: 8px 0; /* Aumenta área de toque */
        display: block;
        font-size: 0.95rem;
    }

    /* 3. COLUNA DE CONTATO - Ocupa 100% embaixo */
    /* Emails e Endereços são longos, precisam de espaço */
    .footer-col:last-child {
        grid-column: 1 / -1; /* Full Width */
        background: rgba(255,255,255,0.03); /* Destaque sutil */
        padding: 20px;
        border-radius: 12px;
        margin-top: 10px;
    }

    .contact-list li {
        margin-bottom: 15px;
        justify-content: flex-start; /* Alinha ícone e texto */
        font-size: 0.95rem;
    }

    /* Ajuste da Barra de Copyright */
    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        margin-top: 40px;
        padding-top: 20px;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    #main-footer {
        padding-top: 0; /* As ondas já dão o respiro necessário */
    }

    .footer-wave-container {
        height: 60px; /* Reduz a altura das ondas no mobile */
    }

    .footer-grid {
        /* Empilha tudo em 1 coluna no mobile para melhor leitura */
        grid-template-columns: 1fr !important;
        text-align: center; /* Centraliza textos */
        gap: 50px !important;
    }

    /* Centraliza o logo e a descrição da marca */
    .brand-col {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .brand-col p {
        max-width: 300px;
        margin: 15px auto !important;
    }

    /* Centraliza os ícones sociais */
    .social-links {
        justify-content: center !important;
    }

    /* Ajusta as listas de navegação e soluções */
    .footer-links li {
        margin-bottom: 12px;
    }

    /* Ajusta a lista de contatos (QG Operacional) */
    .contact-list li {
        justify-content: center; /* Centraliza ícone + texto */
        text-align: center;
        flex-direction: column; /* Ícone em cima do texto no mobile */
        gap: 10px !important;
    }

    .contact-list li span {
        max-width: 100%;
        line-height: 1.6;
        font-size: 0.9rem;
    }

    .icon-small {
        margin-right: 0 !important;
    }

    /* Ajuste do Footer Bottom (Copyright) */
    .footer-bottom {
        flex-direction: column !important; /* Empilha copyright e Studio H5 */
        gap: 15px;
        margin-top: 40px;
        padding: 25px 0;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }
}

/* Ajuste fino para celulares muito pequenos */
@media (max-width: 375px) {
    /* Se a tela for muito pequena, aí sim empilha tudo para não quebrar palavras */
    .footer-grid {
        grid-template-columns: 1fr !important; 
        text-align: center;
    }
    .contact-list li { justify-content: center; }
}


/* ============================================================
   SEÇÃO CTA FINAL (#contact-cta) - MOBILE OPTIMIZATION
   Foco: Conversão, Botões Largos e Leitura Limpa
   ============================================================ */

   @media (max-width: 1024px) {

    #contact-cta .btn-pulse {
        display: flex !important;         /* Habilita o Flexbox */
        flex-direction: row !important;   /* Garante que ícone e texto fiquem lado a lado */
        align-items: center !important;   /* Alinha verticalmente ao centro */
        justify-content: center !important; /* Centraliza o conjunto horizontalmente */
        
        /* Ajuste do espaçamento */
        gap: 12px !important;             /* Espaço consistente entre ícone e texto */
        padding: 16px 20px !important;    /* Padding confortável */
        
        /* Garante a largura total */
        width: 100% !important;
        
        /* Ajuste de fonte para caber em uma linha se possível */
        font-size: 1rem !important;
        line-height: 1.2 !important;
        text-align: center;
    }

    #contact-cta .btn-pulse svg,
    #contact-cta .btn-pulse i { /* Caso use <i> para ícones */
        width: 24px !important;
        height: 24px !important;
        flex-shrink: 0; /* Impede o ícone de amassar */
        margin: 0 !important; /* Remove margens antigas, o gap cuida disso */
    }

    /* 1. Ajuste do Texto Decorativo de Fundo */
    .scrolling-text {
        font-size: 4rem !important; /* Reduz tamanho da fonte gigante */
        top: 20%; /* Ajusta posição vertical */
        opacity: 0.02; /* Deixa ainda mais sutil para não brigar com o texto principal */
        white-space: nowrap;
    }

    /* 2. A Caixa Principal (CTA Box) */
    .cta-box {
        padding: 40px 25px !important; /* Mais espaço interno lateral */
        margin: 0 10px; /* Garante margem segura das bordas da tela */
        text-align: center;
        
        /* Garante legibilidade sobre o fundo */
        backdrop-filter: blur(10px);
        background: rgba(17, 34, 64, 0.95);
    }

    /* Títulos Fluidos */
    .cta-content h2 {
        font-size: clamp(1.8rem, 5vw, 2.5rem) !important; /* Escala suavemente */
        line-height: 1.2;
        margin-bottom: 20px;
    }

    .cta-content p {
        font-size: 1rem !important;
        margin-bottom: 30px;
        color: #a8b2d1; /* Garante contraste */
        padding: 0 10px;
    }

    /* 3. Botões de Ação (A parte mais importante) */
    .cta-buttons {
        display: flex !important;
        flex-direction: column !important; /* Um botão embaixo do outro */
        gap: 15px !important; /* Espaço para evitar clique errado */
        width: 100%;
        max-width: 400px; /* Limite para não ficar feio em tablets */
        margin: 0 auto; /* Centraliza o bloco */
    }

    /* Estilo dos Botões no Mobile */
    .cta-buttons .btn {
        width: 100% !important; /* Ocupa toda a largura disponível */
        padding: 18px 0 !important; /* Área de toque generosa (polegar) */
        font-size: 1rem !important;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
    }

    /* Ajuste específico para o ícone dentro do botão */
    .cta-buttons .btn svg {
        margin-right: 10px;
        width: 20px;
        height: 20px;
    }

    /* Destaque visual para o botão principal (WhatsApp) */
    .btn-pulse {
        background-color: rgb(242, 100, 34); /* Fundo leve para destacar */
        border-color: var(--color-accent);
    }
}

/* Ajuste fino para telas muito pequenas (iPhone 5/SE) */
@media (max-width: 360px) {
    .cta-box { padding: 30px 15px !important; }
    .cta-content h2 { font-size: 1.5rem !important; }
    .scrolling-text { display: none; } /* Remove fundo se a tela for muito pequena */
}


/* ============================================================
   AJUSTE ESPECÍFICO: SEÇÃO SOBRE (#about-section)
   Mobile: Layout Vertical (Texto no topo, Dashboard embaixo)
   ============================================================ */

   @media (max-width: 1024px) {

    #about-section {
        padding: 60px 0;
        overflow: hidden; /* Garante que a animação de fundo não vaze */
    }

    /* 1. Transforma o Grid Geral (Texto | Stats) em Coluna */
    .about-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 50px; /* Espaço entre o texto e o quadro de números */
    }

    /* 2. Ajuste do Texto (Lado Esquerdo no PC -> Topo no Mobile) */
    .about-text {
        width: 100%;
        padding: 0 10px;
        text-align: left; /* Mantém alinhamento profissional à esquerda */
    }

    .about-text h2 {
        font-size: 2rem !important;
        margin-bottom: 20px;
    }

    .about-text p {
        font-size: 1rem !important;
        line-height: 1.6;
        max-width: 100%;
    }

    /* Lista de diferenciais (Checks) */
    .feature-list {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 20px;
    }

    /* 3. Painel de Estatísticas (Lado Direito no PC -> Base no Mobile) */
    .about-stats {
        width: 100%;
        padding: 30px 20px; /* Reduz padding interno para ganhar espaço */
        margin-top: 10px;
    }

    /* 4. Grid dos Números (Stats) */
    /* Aqui mantemos um Grid 2x2 (2 colunas) para não ficar uma lista comprida demais */
    .stats-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important; /* 2 Cards por linha */
        gap: 15px; /* Espaço entre os cards */
    }

    /* Ajuste dos quadradinhos de números */
    .stat-box {
        padding: 20px 10px; /* Mais compacto */
        min-height: 120px;  /* Altura mínima para padronizar */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .stat-number {
        font-size: 2rem !important; /* Número grande, mas não gigante */
    }

    .stat-label {
        font-size: 0.75rem !important;
        margin-top: 5px;
    }

    /* Ajuste do Fundo de Rede (Network BG) */
    /* Deixamos ele mais sutil para não atrapalhar a leitura no celular */
    .network-bg {
        opacity: 0.3;
    }
    
    /* Opcional: Ajuste da animação dos nós para consumir menos bateria no mobile */
    .node, .line { display: none; } /* Limpa o visual, deixa só o fundo sutil */
}

/* Ajuste fino para celulares muito pequenos (iPhone SE, etc) */
@media (max-width: 380px) {
    .stats-grid {
        grid-template-columns: 1fr !important; /* Em telas minúsculas, vira 1 coluna */
    }
}


/* ============================================================
   SEÇÃO PRODUTOS - CARROSSEL TÁTICO MOBILE
   ============================================================ */
   @media (max-width: 1024px) {

    #products-section {
        padding: 60px 0 80px 0; /* Padding extra embaixo para o botão respirar */
        overflow: hidden; /* GARANTE que nada vaze da tela (sem rolagem horizontal indesejada na página) */
        position: relative;
    }

    /* 1. Desativa a Luz do Mouse (Spotlight) - Pesado e inútil no celular */
    .cursor-light { 
        display: none !important; 
    }
    
    /* Ajusta o Grid de fundo para ser sutil e não quebrar */
    .tech-grid-bg {
        background-size: 30px 30px; /* Quadradinhos menores */
        opacity: 0.3;
    }

    /* 2. Layout Carrossel (Swipe Horizontal) */
    .products-container {
        display: flex !important;       /* Sai Grid, entra Flex */
        flex-direction: row !important;
        flex-wrap: nowrap !important;   /* Proíbe quebra de linha */
        
        overflow-x: auto;               /* Rolagem lateral */
        gap: 20px;
        
        /* Espaçamento interno para sombra e scroll */
        padding: 10px 20px 40px 20px; 
        
        /* Ajuste de margem para encostar na borda da tela */
        margin-right: -20px;
        width: calc(100% + 20px); /* Compensa a margem */
        
        scroll-snap-type: x mandatory; /* Efeito magnético */
        -webkit-overflow-scrolling: touch;
    }

    /* Esconde barra de rolagem */
    .products-container::-webkit-scrollbar { display: none; }

    /* 3. Cards do Produto */
    .tech-card {
        min-width: 85vw; /* Ocupa 85% da tela */
        max-width: 85vw;
        flex-shrink: 0;  /* Não encolhe */
        scroll-snap-align: center; /* Para no meio */
        margin: 0 !important;
        height: auto;
        
        /* Visual Fixo (Já que não tem hover) */
        background: rgba(10, 25, 47, 0.95); /* Fundo escuro sólido para leitura */
        border-color: rgba(242, 100, 34, 0.245); /* Borda sutil sempre visível */
        transform: none !important; /* Remove tilt 3D */
    }

    /* 4. Conteúdo do Card */
    .tech-card .img-wrapper {
        height: 180px;
        margin-bottom: 15px;
    }
    
    .tech-card .product-img {
        transform: scale(1); /* Imagem normal */
        filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
    }

    /* SPECS TÉCNICAS (Sempre visíveis no Mobile) */
    /* No desktop elas somem e aparecem no hover. No mobile, mostramos sempre. */
    .tech-specs {
        opacity: 1 !important;
        transform: translateY(0) !important;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 20px;
        background: rgba(0,0,0,0.2); /* Fundo leve para separar */
        padding: 10px;
        border-radius: 8px;
    }

    /* 5. CORREÇÃO DO BOTÃO "VER CATÁLOGO" */
    /* Força o container do botão a se comportar */
    .center-btn {
        width: 100%;
        margin-top: 30px !important;
        padding: 0 20px; /* Margem de segurança */
        display: block !important;
        position: relative;
        z-index: 5;
        clear: both;
    }

    .center-btn .btn {
        width: 100%;
        display: block;
        padding: 16px 0; /* Botão alto para toque */
    }
}

/* ============================================================
   SEÇÃO DE SERVIÇOS - CARROSSEL MOBILE AVANÇADO
   ============================================================ */
   @media (max-width: 900px) {

    #services-section {
        padding: 60px 0;
        overflow: hidden; /* Garante que nada vaze da largura da tela */
    }

    /* 1. Ajuste do Título */
    .section-header {
        margin-bottom: 30px;
        padding: 0 20px;
    }
    .section-header h2 { font-size: 2rem !important; }
    .section-header p { font-size: 1rem !important; max-width: 100%; }

    /* 2. Transformação em Carrossel (Horizontal Snap) */
    .services-grid {
        display: flex !important; /* Sai Grid, entra Flex */
        flex-wrap: nowrap !important; /* Impede quebra de linha */
        gap: 20px;
        
        /* Habilita rolagem lateral */
        overflow-x: auto; 
        
        /* Efeito Magnético (O card para no centro) */
        scroll-snap-type: x mandatory; 
        
        /* Ajustes de Espaçamento para o card não cortar */
        padding: 20px 20px 50px 20px; /* Padding extra embaixo para a sombra */
        margin: 0 -20px; /* Quebra as margens do container para ir até a borda */
        
        /* Suavidade no iOS */
        -webkit-overflow-scrolling: touch; 
        
        /* Centraliza o scroll inicialmente (opcional, JS faria melhor, mas CSS ajuda) */
        scroll-padding: 20px;
    }

    /* Esconde a barra de rolagem (Visual Limpo) */
    .services-grid::-webkit-scrollbar { display: none; }

    /* 3. Ajuste dos Cards Individuais */
    .service-card {
        /* Tamanho Fixo: 85% da largura da tela */
        min-width: 85vw; 
        max-width: 85vw;
        
        /* Centralização Magnética */
        scroll-snap-align: center; 
        
        /* Reset de margens */
        margin: 0;
        
        /* Altura igual para todos */
        height: auto; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        /* Garante que o Glassmorphism apareça bem */
        backdrop-filter: blur(15px);
        background: rgba(10, 25, 47, 0.85); 
    }

    /* Remove o efeito de "subir" no hover, pois em touch pode bugar */
    .service-card:hover {
        transform: none; 
    }

    /* Ajuste dos Ícones para ficarem proporcionais */
    .card-icon-box {
        width: 50px; height: 50px; margin-bottom: 20px;
    }
    .card-icon-box svg { width: 24px; height: 24px; }
    
    .service-card h3 { font-size: 1.4rem; }
    .service-card p { font-size: 0.95rem; line-height: 1.5; }
}

   @media (max-width: 968px) {

    /* --- 1. ESTRUTURA GERAL DO HERO --- */
    #hero-section {
        /* Ajuste para altura dinâmica no mobile (evita corte pela barra do navegador) */
        min-height: auto; 
        padding-top: 120px; /* Espaço para o menu fixo */
        padding-bottom: 60px;
        text-align: center;
        /* Reajusta o background para o centro */
        background-position: center top; 
    }

    .hero-content {
        display: flex;
        flex-direction: column-reverse; /* Imagem em cima ou Texto em cima? Vamos testar Texto em Cima para conversão */
        align-items: center;
        gap: 40px;
    }
    
    /* Se preferir a imagem ENTRE o título e os botões, usamos order. 
       Mas o padrão "Texto -> Botão" converte mais. Vamos manter Texto -> Botões -> Imagem (embaixo ou sumir) 
       Aqui vamos deixar a imagem visível, mas menor */
    .hero-content {
        flex-direction: column; 
    }

    /* --- 2. TIPOGRAFIA FLUIDA (Matemática CSS) --- */
    /* clamp(minimo, ideal, maximo) -> O tamanho se adapta pixel a pixel */
    .hero-text h1 {
        font-size: clamp(2.2rem, 8vw, 3.5rem) !important;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    .hero-text p {
        font-size: clamp(1rem, 4vw, 1.2rem) !important;
        max-width: 100%;
        padding: 0 10px; /* Margem de segurança */
        color: #a8b2d1; /* Garante contraste */
    }

    .hero-badge {
        margin: 0 auto 20px auto; /* Centraliza a badge */
        display: inline-block;
    }

    /* --- 3. BOTÕES TÁTICOS (SEM QUEBRA DE LINHA) --- */
    .hero-actions {
        display: flex;
        flex-direction: column; /* Um embaixo do outro */
        width: 100%;
        max-width: 400px; /* Não deixa ficar largo demais em tablets */
        gap: 15px; /* Espaço entre botões */
        margin: 0 auto; /* Centraliza o bloco de botões */
    }

    .hero-actions .btn {
        width: 100%; /* Ocupa toda a largura disponível */
        padding: 16px 0; /* Mais altura para o dedo (Touch Target) */
        font-size: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap; /* PROÍBE QUEBRA DE TEXTO */
    }

    /* Efeito de clique no mobile (Feedback visual) */
    .hero-actions .btn:active {
        transform: scale(0.98);
        background-color: var(--color-accent);
        color: #000;
    }

    /* --- 4. VISUAL DO RÁDIO (AJUSTADO) --- */
    .hero-visual {
        height: auto;
        width: 100%;
        max-width: 280px; /* Tamanho ideal para celular */
        margin-top: 20px;
        /* Removemos sombras pesadas que travam celular barato */
        filter: none; 
    }

    /* O Brilho atrás do rádio */
    .radio-glow {
        width: 200px; height: 200px;
        filter: blur(60px); /* Menos blur para pesar menos */
        opacity: 0.4;
    }

    .hero-image {
        max-width: 100%;
        height: auto;
        /* Mantém a animação de flutuar, mas mais suave */
        animation: float-mobile 4s ease-in-out infinite;
    }

    /* Badge flutuante (Bateria, etc) - Esconde em telas muito pequenas para limpar visual */
    .floating-badge {
        display: none; 
    }
}

/* --- 5. AJUSTES FINOS PARA TELAS MUITO PEQUENAS (320px - iPhone SE/Galaxy Fold) --- */
@media (max-width: 370px) {
    h1 { font-size: 2rem !important; } /* Reduz título */
    .hero-text p { font-size: 0.9rem !important; }
    
    /* Ajusta botões para caberem sem estourar */
    .hero-actions .btn {
        padding: 14px 0;
        font-size: 0.9rem;
    }
    
    #hero-section { padding-top: 100px; } /* Sobe um pouco o conteúdo */
}

/* Animação de flutuação mais contida para mobile */
@keyframes float-mobile {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); } /* Movimento menor */
    100% { transform: translateY(0px); }
}

   @media (max-width: 1024px) {

    /* --- 1. BOTÃO HAMBURGUER MENOR --- */
    .mobile-menu-trigger {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 24px; /* Reduzido de 30px */
        height: 18px; /* Reduzido de 22px */
        cursor: pointer;
        z-index: 2000;
        position: relative;
        margin-left: 20px;
    }

    .mobile-menu-trigger span { /* Se usar span no HTML */
        display: block; /* Garante que apareça */
        width: 100%;
        height: 2px; /* Barras mais finas */
        background-color: var(--color-accent);
        border-radius: 2px;
        transition: 0.3s;
    }
    
    /* Caso seu HTML use div class="bar" substitua span por .bar aqui no CSS */
    .mobile-menu-trigger .bar {
        width: 100%; height: 2px; background-color: var(--color-accent); transition: 0.3s;
    }

    /* Animação do X */
    .mobile-menu-trigger.active span:nth-child(1),
    .mobile-menu-trigger.active .bar:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
    
    .mobile-menu-trigger.active span:nth-child(2),
    .mobile-menu-trigger.active .bar:nth-child(2) { opacity: 0; }
    
    .mobile-menu-trigger.active span:nth-child(3),
    .mobile-menu-trigger.active .bar:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }


    /* --- 2. MENU LATERAL E FONTE MENOR --- */
    .main-nav {
        position: fixed;
        top: 0; right: -100%;
        width: 75%; /* Um pouco mais estreito */
        height: 100vh;
        background: #020c1b;
        border-left: 1px solid var(--color-accent);
        padding: 70px 25px; /* Padding reduzido */
        transition: right 0.3s cubic-bezier(0.77, 0, 0.175, 1);
        z-index: 1500;
        display: flex !important;
        flex-direction: column;
        justify-content: flex-start;
        box-shadow: -10px 0 50px rgba(0,0,0,0.9);
    }

    .main-nav.menu-open { right: 0; }

    /* --- AJUSTE DA LISTA (UM EMBAIXO DO OUTRO) --- */
    .nav-list {
        display: flex !important;
        flex-direction: column !important; /* FORÇA VERTICAL */
        align-items: flex-start !important; /* Alinha tudo à esquerda */
        gap: 0 !important; /* Remove espaçamento lateral */
        width: 100%;
    }

    .nav-link {
        font-size: 1.2rem; /* Tamanho bom para ler */
        padding: 20px 0; /* Espaço para o dedo clicar */
        border-bottom: 1px solid rgba(255,255,255,0.05); /* Linha divisória sutil */
        display: flex;
        justify-content: space-between; /* Joga a setinha pro canto direito */
        align-items: center;
        width: 100%;
        color: var(--color-text-primary);
    }

    /* --- 3. SUBMENU (Lógica de Clique) --- */
    .dropdown-menu {
        display: none; /* Escondido por padrão */
        position: static;
        background: rgba(255,255,255,0.03);
        border-left: 2px solid var(--color-accent);
        margin-top: 0;
        padding-left: 20px;
        width: 100%;
        opacity: 1; visibility: visible; transform: none; box-shadow: none;
    }

    .dropdown-item.active-mobile .dropdown-menu {
        display: block !important;
        animation: fadeInMobile 0.3s ease;
    }

    @keyframes fadeInMobile {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    /* Demais ajustes de grid/swipe mantidos... */
    .header-cta { display: none; }
    
    /* (Mantenha aqui o restante do código do Swipe Wrapper que te passei antes) */
    .swipe-wrapper {
        display: flex !important;
        grid-template-columns: none !important;
        overflow-x: auto;
        gap: 15px;
        padding-bottom: 30px;
        margin-right: -20px; padding-right: 20px;
        scroll-snap-type: x mandatory;
    }
    .swipe-wrapper > div, .service-card, .tech-card, .product-item, .rack-unit {
        min-width: 85vw;
        margin-bottom: 0 !important;
        scroll-snap-align: center;
    }
    .swipe-wrapper::-webkit-scrollbar { display: none; }
    
    h1 { font-size: 2.2rem !important; }
    .hero-content, .hero-split, .hero-content-eng { padding-top: 90px; }
    .footer-grid { display: grid; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    /* Transforma a linha de clientes em um Grid de 2 colunas */
    .clients-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr); /* Força exatamente 2 colunas */
        gap: 15px !important; /* Espaçamento entre os cards */
        justify-items: center; /* Centraliza os cards nas colunas */
        padding: 0 10px;
    }

    /* Ajusta o tamanho dos cards para caberem lado a lado */
    .client-logo-card {
        width: 100% !important; /* Ocupa a largura total da coluna do grid */
        max-width: 160px !important; /* Limite para não esticar demais em telas maiores */
        height: 100px !important; /* Altura um pouco menor para o mobile */
        padding: 15px !important;
        margin: 0 !important; /* Remove margens que possam atrapalhar o grid */
    }

    /* Ajusta o título da seção se necessário */
    .clients-header h3 {
        font-size: 1rem !important;
        padding: 0 20px;
    }
}