/* Define variáveis CSS globais que podem ser reutilizadas em todo o documento */
        :root {
            /* Cores principais do site */
            --cor-primaria: #FD5C03; /* Azul principal */
            --cor-secundaria: #000000;
            --cor-fundo: #1F1F1F; 
            --cor-accent:#FE9856;
            --cor-texto: #ffffff; /* Cor do texto padrão */
            --cor-fundo-claro: #f8f9fa; /* Fundo cinza claro */
            --cor-branco: #ffffff; /* Branco */
            
            /* Tipografia */
            --fonte-principal: Raleway, sans-serif; /* Fonte padrão do site */
            --tamanho-fonte-base: 16px; /* Tamanho base (1rem = 16px) */
            --altura-linha: 1.6; /* Espaçamento entre linhas */
            --titulos:'Playfair+Display', serif;
            --peso-fino: 300; /* Textos leves */
            --peso-normal: 400; /* Textos padrão */
            --peso-medio: 600; /* Textos médios como nav */
            --peso-negrito: 700; /* Títulos negrito */
                    
            /* Espaçamentos padrão */
            --espacamento-pequeno: 15px;
            --espacamento-medio: 30px;
            --espacamento-grande: 60px;
            
            /* Tamanhos de fontes */
            --fonte-pequena: 0.875rem; /* 14px */
            --fonte-normal: 1rem; /* 16px */
            --fonte-media: 1.3rem; /* ~20px */
            --fonte-grande: 2.5rem; /* ~40px */
            --fonte-extra-grande: 3rem; /* ~48px */
            
            /* Bordas */
            --borda-radius-pequeno: 5px;
            --borda-radius-medio: 10px;
            
            /* Sombras */
            --sombra-leve: 0 2px 5px rgba(255, 69, 69, 0.1);
            --sombra-media: 0 10px 20px rgba(0,0,0,0.1);
            
            /* Largura máxima do conteúdo */
            --largura-maxima: 1200px;
            
        }

        /* Seletor universal - aplica estilos a todos os elementos */
        * {
            margin: 0; /* Remove margem padrão de todos os elementos */
            padding: 0; /* Remove padding padrão de todos os elementos */
            box-sizing: border-box; /* Inclui padding e border no tamanho total do elemento */
            transition: 0.2s linear; 
        }
         /* Configuração do elemento raiz (html) */
        html {
            font-size: var(--tamanho-fonte-base); /* Define tamanho base da fonte usando variável */
            scroll-behavior: smooth; /* Adiciona rolagem suave ao clicar em links âncora */
            -webkit-font-smoothing: antialiased; /* Melhora renderização de fontes no Safari/Chrome */
            -moz-osx-font-smoothing: grayscale; /* Melhora renderização de fontes no Firefox */
        }
          /* Estilos do corpo da página */
        body {
            font-family: var(--fonte-principal); /* Define a fonte padrão usando variável */
            line-height: var(--altura-linha); /* Define o espaçamento entre linhas usando variável */
            color: var(--cor-texto); /* Define a cor do texto padrão usando variável */
            overflow-x: hidden; /* Previne scroll horizontal indesejado */
            min-height: 100vh; /* Garante que o body ocupe pelo menos 100% da altura da tela */
        }
        section{
            padding: var(--espacamento-medio);
        }
        h1, h2, h3{
            font-family: var(--titulos);
            font-weight: var(--peso-negrito);
        }
        /* Remove TODOS os estilos de links */
        a {
            all: unset; /* Remove todos os estilos padrão */
            cursor: pointer; /* Mantém o cursor de mãozinha */
        }
        /* Remove estilos padrão de listas */
        ul, ol {
            list-style: none; /* Remove marcadores de lista */
        }
        /* Garante que imagens sejam responsivas */
         img {
            max-width: 100%; /* Imagem não ultrapassa largura do container */
            height: auto; /* Mantém proporção da imagem */
            display: block; /* Remove espaço extra abaixo da imagem */
        }

        header{
            background-color: rgb(0, 0, 0, 0.9);
            position: fixed;
            padding: 20px;
            left: 0;  
            top: 0;
            right: 0;
            z-index: 99;
        }
        .logo img{
            width: 110px;
            right: auto;  
        }

        .header section{
            display: flex;
            align-items: center;
            justify-content: space-around;
                       
        }
        .navbar a {
            margin: 20px;
            text-transform: uppercase;
            
        }
        .navbar a:hover{
            color: var(--cor-accent);
               
        }
        
        .btn{
            color: var(--cor-texto);
            font-size: 20px;
            padding: 15px 35px;
            background-color: var(--cor-primaria);
            border-radius: 7px;  
            cursor: pointer;
            transition: transform 0.3s ease;
            margin-left: 100px;
            border: none;                  
        }
        .btn:hover{
            transform: scale(1.1);
        }
        .hero-container{
            background-size: cover; /* Cobre toda a área */
            background-position: center; /* Centraliza a imagem */
            height: 700px; /* Defina a altura */
            display: flex; /* Para centralizar o texto */
            justify-content: center; /* Centraliza horizontalmente */
            align-items: center; /* Centraliza verticalmente */
            animation: trocar-background 20s infinite;
        }
        /* Animação para 3 imagens */
        @keyframes trocar-background {
            0%, 33%  { /* Do início até 30% do tempo */
                background-image: url('../img/Banner/carrossel-nexus-1.png'); /* Mostra a primeira imagem */
            }
            33%, 66%  { /* De 33% até 63% do tempo */
                background-image: url('../img/Banner/carrossel-nexus-2.png'); /* Mostra a segunda imagem */
            }
            66%, 100%{ /* De 66% até 96% do tempo */
                background-image: url('../img/Banner/carrossel-nexus-3.png'); /* Mostra a terceira imagem */
            }
        }
               

        .content{
            justify-items: center;
             text-align: center;
        }

        .content h1{
            margin-top: 150px;
            line-height: 1.5;
            font-weight: 800;
            text-transform: uppercase;
            font-size: 35px;
        }
        .content h3{
            justify-items: center;
            text-align: justify;
            line-height: 3;
            letter-spacing: 1px; /* Define o espaçamento entre letras */
            font-size: 25px;
            color: rgba(255, 255, 255, 0.774);
        }
        #diferenciais{
            text-align: center;
            padding: 50px;
            background-color: var(--cor-secundaria);
        }
        #diferenciais h1{
            color: var(--cor-accent);
            text-transform: uppercase;
        }
        .cards-diferenciais{
            display: flex;
            justify-content: center;   
        }
        .card{
            color: var(--cor-texto);
            margin: 30px 10px;
            padding: 30px;
            width: 300px;
            height: 350px;
            background-color: var(--cor-fundo);
            text-align: center;
            border-radius: 20px;
            border-right: 1px solid var(--cor-accent);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }
        .card:hover, .card-laranja:hover {
                 transform: translateY(-10px);
        }
        .card img{
            margin: 0 auto 25px auto;
            width: 50px;
            height: 50px;
            filter: brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(1817%) hue-rotate(327deg) brightness(101%) contrast(99%);/* Muda a cor do svg para laranja */
            
        }
        .card h3{
            text-transform: uppercase;
            margin-bottom: 15px;
            color: var(--cor-texto);
        }
         .card p{
            color: var(--cor-texto);
            font-size: var(--fonte-pequena);
            margin-bottom: 10px;
            max-width: 600px;
            
        }
        .card-laranja{
            color: var(--cor-secundaria);
            margin: 30px 10px;
            padding: 30px;
            width: 300px;
            height: 350px;
            background-color: var(--cor-accent);
            text-align: center;
            border-radius: 20px;
            border-right: 1px solid var(--cor-secundaria);
        }
        
        .card-laranja img{
            margin: 0 auto 25px auto;
            width: 50px;
            height: 50px;
            filter: brightness(0); /* Muda a cor do svg para preto */
        }
        .card-laranja h3{
            color: var(--cor-secundaria);
            text-transform: uppercase;
        }
        .card-laranja p{
            color: var(--cor-secundaria);
            font-size: var(--fonte-pequena);
            margin-bottom: 10px;
            max-width: 600px;  
        }
        .diferenciais{
            background-color: var(--cor-fundo-claro);
            text-align: center;
        }
        .diferenciais h1{
            color: var(--cor-secundaria);
        }
        .diferenciais h2{
            color: var(--cor-accent);
            text-transform: uppercase;
        }
        #depoimentos {
            padding: 50px;
            text-align: center;
            background: white;
        }

        #depoimentos h2 {
            color: var(--cor-secundaria);
            text-transform: uppercase;
            margin-bottom: 10px;
        }

        #depoimentos h1 {
            color: var(--cor-secundaria);
            margin-bottom: 30px;
        }

        #depoimentos > p {
            color: var(--cor-secundaria);
            font-size: 18px;
            margin-bottom: 60px;
            max-width: 600px;
        }

        /* Container dos depoimentos */
        .depoimentos-container {
            display: flex;
            gap: 30px;
            justify-content: center;
            flex-wrap: wrap;
            max-width: 1200px;
            margin: 0 auto;
        }

        /* Card de depoimento */
        .depoimento-card {
            background: white;
            padding: 35px;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            width: 350px;
            text-align: left;
            transition: transform 0.3s;
            position: relative;
            border-top: 4px solid var(--cor-accent);
        }

        .depoimento-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        /* Aspas decorativas */
        .depoimento-card::before {
            content: '"';
            font-size: 80px;
            color:var(--cor-accent);
            opacity: 0.2;
            position: absolute;
            top: 10px;
            left: 20px;
            font-family: Georgia, serif;
        }

        /* Estrelas */
        .estrelas {
            display: flex;
            gap: 5px;
            margin-bottom: 20px;
        }

        .estrela {
            width: 20px;
            height: 20px;
            fill: var(--cor-accent);
        }

        /* Texto do depoimento */
        .depoimento-texto {
            color: #4a5568;
            line-height: 1.8;
            margin-bottom: 25px;
            font-size: 15px;
            font-style: italic;
        }

        /* Informações do autor */
        .autor {
            display: flex;
            align-items: center;
            gap: 15px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }

        .autor-foto {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--cor-primaria);
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-weight: 700;
            font-size: 20px;
        }

        .autor-info h4 {
            font-size: 16px;
            color: #2d3748;
            margin-bottom: 5px;
        }

        .autor-info p {
            font-size: 13px;
            color: #718096;
        }

        /* Badge do Google */
        .google-badge {
            display: flex;
            align-items: center;
            gap: 5px;
            font-size: 12px;
            color: #5f6368;
            margin-top: 5px;
        }

        .google-icon {
            width: 16px;
            height: 16px;
        }
        #soluction{
            text-align: center;
            padding: 50px;
            background-color: var(--cor-fundo);    
        }
        #soluction h1{
            color: var(--cor-accent);
            text-transform: uppercase;
        }
        .solucoes-container{
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 15px;
           
                
        }
        .card-solucoes{
            color: var(--cor-texto);
            padding: 30px;
            width: 400px;
            height: auto;
            text-align: center;
            border-radius: 20px;
            border-bottom: 1px solid var(--cor-accent);
           
             
              
        }
        .card-solucoes img{
            width: 350px;
            height: 350px;
            border-radius: 20px;
            border-top: 1px solid var(--cor-accent);
            
        }
        .card-solucoes h3{
            margin: 20px;
            color: var(--cor-accent);
            text-align: center;
            
            
        }
         .card-solucoes p{
            color: var(--cor-texto);
            font-size: var(--fonte-pequena);
            text-align: center;
            margin-bottom: 10px;
            max-width: 600px;
            
        }
        

        #contact-container{
            display: flex;
            justify-content: center;
            gap: 150px;
            padding: 50px; 
            background-color: var(--cor-fundo-claro);
            
        }
        .contato h1{
            text-align: center;
            color: var(--cor-secundaria);
            text-transform: uppercase;
        }
        .contato h4{
            margin-top: 30px;
            color: var(--cor-secundaria);
        }
        .contato img{
            margin-top: 30px;
            width: 30px;
            height: 30px;
        }
        .contato-email, .contato-tel, .contato-endereco{
             display: flex;
             align-items: center;
             gap: 15px;
             transition: transform 0.3s;
        }
        .redes-sociais {
            margin-top: 20px;
            text-align: left;
            
        }

        .social-icons {
            display: flex;
            gap: 20px;
            justify-content: center;
            flex-wrap: wrap;
            
        }

        .social-icon:hover {
            transform: translateY(-8px) scale(1.1);
            
        }

        .social-icon svg {
            width: 25px;
            height: 25px;
            fill: var(--cor-accent);
            border-radius: 50%;
            
        }

        .form-wrapper {
            background-color: var(--cor-fundo);
            padding: 50px;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        }

        .form-wrapper h2 {
            color: var(--cor-branco);
            text-align: center;
            margin-bottom: 15px;
            font-size: 36px;
        }

        .form-wrapper p {
            text-align: center;
            color: var(--cor-branco);
            margin-bottom: 40px;
        }

        .form-group {
            margin-bottom: 25px;
        }

        .form-group label {
            display: block;
            margin-bottom: 8px;
            color: var(--cor-secundaria);
            font-weight: 600;
        }

        .form-group input,
        .form-group textarea,
        .form-group select {
            width: 100%;
            padding: 14px;
            border: 2px solid var(--cor-fundo);
            border-radius: 8px;
            font-size: 16px;
            font-family: inherit;
            transition: border-color 0.3s;
        }


        .form-group textarea {
            resize: vertical;
            min-height: 120px;
        }

        .btn-form {
            width: 100%;
            padding: 16px;
            background-color: var(--cor-primaria);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 18px;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.3s;
            margin-top: 10px;
        }

        .btn-form:hover {
            transform: scale(1.1);
        }
        .required {
            color: #e53e3e;
        }
        #footer{
            background-color: var(--cor-secundaria);
            z-index: 99;
            padding: 50px;
        }
        .footer-container{
            display: flex;
            justify-content: space-around;   
        }
       
        .footer-logo img{
            width: 110px;
            right: auto;
            margin-left: 50px; 
            margin-bottom: 10px; 
        }
        .footer-logo h4{
            text-align: center;
        }
        
        .footer-contato h2, .footer-institucional h2{
            color: var(--cor-accent);  
        }
        .footer-contato h4{
            margin: 10px auto;
        }
        .footer-institucional li{
            display: flex;
            flex-direction: column;
            gap: 8px;   
        }
        .footer-institucional a:hover{
            color: var(--cor-accent);
        }
        .social-icons-footer{
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 10px;
        }
         /* ============================================================
           O TRUQUE: INPUT CHECKBOX ESCONDIDO
           
           Todo o mecanismo de abrir/fechar gira em torno de um
           <input type="checkbox"> que fica invisível na página.
           Quando está marcado = menu aberto.
           Quando está desmarcado = menu fechado.
           O CSS detecta isso com o seletor :checked.
           ============================================================ */

        /* Esconde completamente o checkbox da tela
           (ele não pode ter display:none pois alguns browsers
           ignoram :checked em elementos ocultos com display:none,
           por isso usamos posição absoluta fora da tela) */
        #toggle-menu {
            position: absolute;  /* Tira do fluxo normal da página */
            top: -9999px;        /* Joga pra bem fora da tela */
            left: -9999px;       /* Joga pra bem fora da tela */
            opacity: 0;          /* Torna invisível */
            width: 0;            /* Sem largura */
            height: 0;           /* Sem altura */
        }


        /* ============================================================
           LABEL = BOTÃO HAMBURGUER
           
           O <label for="toggle-menu"> funciona como botão:
           clicar nele marca/desmarca o checkbox acima.
           Por isso não precisamos de JS!
           ============================================================ */
        .btn-hamburguer {
            display: none;           /* Escondido no desktop */
            flex-direction: column;  /* Empilha as 3 barras verticalmente */
            justify-content: center;
            gap: 5px;
            width: 40px;
            height: 40px;
            cursor: pointer;         
            padding: 5px;
            z-index: 200;            /* Na frente do menu mobile */
            position: relative;
        }

        /* Cada barra do hamburguer */
        .btn-hamburguer span {
            display: block;
            width: 100%;
            height: 2px;
            background-color: var(--cor-texto);
            border-radius: 2px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        /* ============================================================
           MENU MOBILE — o painel que cobre a tela
           ============================================================ */
        .nav-mobile {
            display: none;               /* Escondido no desktop */
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.97);
            z-index: 100;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 10px;

            /* Estado inicial: invisível e levemente acima */
            opacity: 0;
            transform: translateY(-20px);
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        /* ============================================================
           ABRIR O MENU — também com :checked
           
           Quando o checkbox está marcado, adiciona display:flex
           e anima a entrada do painel
           ============================================================ */
        #toggle-menu:checked ~ .nav-mobile {
            display: flex;           /* Mostra o painel */
            opacity: 1;              /* Totalmente visível */
            transform: translateY(0); /* Posição final */
        }

        /* Links do menu mobile */
        .nav-mobile a {
            font-size: 1.5rem;
            font-family: var(--fonte-principal);
            color: var(--cor-texto);
            padding: 15px 40px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            width: 80%;
            text-align: center;
            letter-spacing: 2px;
            text-transform: uppercase;
            transition: color 0.2s ease, border-color 0.2s ease;
        }

        .nav-mobile a:hover {
            color: var(--cor-accent);
            border-bottom-color: var(--cor-accent);
        }

        /* ============================================================
           OVERLAY — fundo escurecido
           
           Também controlado pelo :checked.
           É um <label> apontando para o mesmo checkbox:
           clicar no overlay desmarca o checkbox e fecha o menu.
           ============================================================ */
        .overlay {
            display: none;       /* Escondido por padrão */
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 99;
            cursor: pointer;     /* Indica que é clicável */
        }

        /* Quando checkbox marcado, mostra o overlay */
        #toggle-menu:checked ~ .overlay {
            display: block;
        }


        /* ============================================================
           RESPONSIVO — hamburguer só em mobile (768px)
           ============================================================ */
        @media (max-width: 768px) {

            /* Mostra o botão hamburguer (label) */
            .btn-hamburguer {
                display: flex;
            }

            /* Esconde navbar e botão desktop (igual ao seu CSS) */
            .navbar { display: none; }
            .btn-nav { display: none !important;}

            /* Logo na esquerda, hamburguer na direita */
            .header section {
                justify-content: space-between;
            }
        }
        
/* ============================================
   TABLET - até 1024px
   Esse bloco ativa quando a tela for menor que 1024px
   ============================================ */
@media (max-width: 1024px) { /* Se a largura da tela for menor ou igual a 1024px, aplica os estilos abaixo */

    /* Cards dos diferenciais - 2 por linha */
    .cards-diferenciais,
    .cards-diferenciais2 {
        flex-wrap: wrap; /* Permite que os cards quebrem de linha quando não cabem */
        justify-content: center; /* Centraliza os cards horizontalmente */
        gap: 20px; /* Coloca 20px de espaço entre os cards */
        padding: 0 20px; /* Adiciona 20px de espaço nas laterais para não grudar na borda */
    }

    .card, .card-laranja {
        width: 280px; /* Diminui a largura dos cards para caber 2 por linha */
    }

    /* Soluções - 1 por linha */
    .solucoes-container {
        flex-wrap: wrap; /* Permite que os cards de soluções quebrem de linha */
        justify-content: center; /* Centraliza os cards horizontalmente */
    }

    .card-solucoes {
        width: 400px; /* Define a largura dos cards de soluções */
    }

    /* Depoimentos - empilha para 1 por linha */
    .depoimentos-container {
        flex-direction: column; /* Muda a direção do flex para vertical (empilha os cards) */
        align-items: center; /* Centraliza os cards empilhados */
    }

    /* Contato - empilha contato e formulário */
    #contact-container {
        flex-direction: column; /* Empilha o contato e o formulário verticalmente */
        align-items: center; /* Centraliza o conteúdo */
    }

    .form-section {
        position: static; /* Remove o posicionamento relativo que usava top negativo */
        margin-left: 0; /* Remove a margem esquerda que posicionava o formulário */
        width: 100%; /* O formulário ocupa toda a largura disponível */
        padding: 0 20px 50px; /* 0 no topo, 20px nas laterais, 50px embaixo */
    }

    /* Footer - empilha as colunas */
    .footer-container {
        flex-direction: column; /* Empilha as colunas do footer verticalmente */
        align-items: center; /* Centraliza o conteúdo do footer */
        gap: 40px; /* Coloca 40px de espaço entre cada coluna empilhada */
        text-align: center; /* Centraliza o texto dentro de cada coluna */
    }
}

/* ============================================
   TABLET PEQUENO - até 768px
   Esse bloco ativa quando a tela for menor que 768px
   ============================================ */
@media (max-width: 768px) { /* Se a largura da tela for menor ou igual a 768px, aplica os estilos abaixo */

    /* Hero - ajusta altura e texto */
    .hero-container {
        height: 450px; /* Diminui a altura do hero de 700px para 450px */
    }

    .content h1 {
        font-size: 2rem; /* Diminui o tamanho do título principal do hero */
        margin-top: 80px; /* Diminui o espaço do topo do título */
        padding: 0 20px; /* Adiciona espaço nas laterais pra não grudar na borda */
    }

    .content h3 {
        font-size: 1rem; /* Diminui o tamanho do subtítulo */
        line-height: 2; /* Ajusta o espaçamento entre linhas do subtítulo */
    }

    /* Seções - menos padding */
    .diferenciais,
    .diferenciais2,
    #depoimentos,
    #soluction {
        padding: 40px 20px; /* Diminui o espaçamento interno das seções (40px topo/baixo, 20px laterais) */
    }

    /* Cards - largura total */
    .card, .card-laranja {
        width: 100%; /* Os cards ocupam toda a largura disponível */
        max-width: 400px; /* Mas não ultrapassam 400px de largura */
        height: auto; /* Remove a altura fixa, ajusta ao conteúdo */
    }

    /* Soluções - ajusta largura */
    .card-solucoes {
        width: 100%; /* Os cards de soluções ocupam toda a largura */
        max-width: 450px; /* Mas não ultrapassam 450px */
    }

    .card1-solucoes img,
    .card2-solucoes img,
    .card3-solucoes img {
        width: 100%; /* As imagens das soluções ocupam toda a largura do card */
        height: auto; /* Mantém a proporção original da imagem */
    }

    /* Depoimentos - ajusta largura */
    .depoimento-card {
        width: 100%; /* Os cards de depoimento ocupam toda a largura */
        max-width: 450px; /* Mas não ultrapassam 450px */
    }

    /* Contato - centraliza tudo */
    .contato {
        text-align: center; /* Centraliza o texto da seção de contato */
        width: 100%; /* A seção de contato ocupa toda a largura */
    }

    .contato-email,
    .contato-tel,
    .contato-endereco {
        justify-content: center; /* Centraliza os ícones e textos de contato */
    }

    /* Formulário - menos padding interno */
    .form-wrapper {
        padding: 30px 20px; /* Diminui o espaçamento interno do formulário */
    }

    /* Footer - centraliza o logo */
    .footer-logo img {
        margin-left: 0; /* Remove a margem esquerda do logo do footer pra centralizar */
    }
}

/* ============================================
   CELULAR - até 480px
   Esse bloco ativa quando a tela for menor que 480px
   ============================================ */
    @media (max-width: 480px) { /* Se a largura da tela for menor ou igual a 480px, aplica os estilos abaixo */

    /* Hero - ainda menor para celular */
    .hero-container {
        height: 350px; /* Diminui ainda mais a altura do hero para celular */
    }

    .content h1 {
        font-size: 1.5rem; /* Diminui mais o título pra caber no celular */
        margin-top: 60px; /* Menos espaço no topo */
    }

    .content h3 {
        font-size: 0.85rem; /* Diminui o subtítulo ainda mais */
        letter-spacing: 1px; /* Reduz o espaçamento entre as letras */
    }

    /* Títulos das seções menores */
    .diferenciais h1,
    .diferenciais2 h1,
    #depoimentos h1,
    #soluction h1 {
        font-size: 1.8rem; /* Diminui os títulos das seções para caber no celular */
    }

    /* Cards - sem margem lateral */
    .cards-diferenciais,
    .cards-diferenciais2 {
        padding: 0 10px; /* Menos espaço nas laterais para aproveitar mais a tela */
    }

    .card, .card-laranja {
        width: 100%; /* Os cards ocupam toda a largura do celular */
        margin: 15px 5px; /* Menos espaço entre os cards empilhados */
    }

    /* Botões - largura total no celular */
    .btn, .btn-hero, .btn-solucoes {
        display: block; /* Muda os botões para bloco pra ocupar uma linha inteira */
        width: 80%; /* Os botões ocupam 80% da largura da tela */
        margin-left: auto; /* Junto com margin-right: auto, centraliza o botão */
        margin-right: auto;
        text-align: center; /* Centraliza o texto dentro do botão */
    }

    /* Formulário - menos padding interno */
    .form-wrapper {
        padding: 25px 15px; /* Menos espaço interno no formulário no celular */
    }

    .form-wrapper h2 {
        font-size: 24px; /* Diminui o título do formulário */
    }

    /* Footer - menos espaçamento */
    #footer {
        padding: 30px 15px; /* Menos espaçamento interno do footer */
    }

    .footer-container {
        gap: 25px; /* Menos espaço entre as colunas do footer empilhadas */
    }
}