/* --- Variáveis de Cores CMYK --- */
        :root {
            --ciano: #00AEEF;
            --magenta: #E4007C;
            --amarelo: #FFED00;
            --preto: #1a1a1a;
            --branco: #ffffff;
            --fundo: #f4f4f9;
            --verde: #00b82e;
        }

        /* --- Reset e Configurações Básicas --- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            background-color: var(--fundo);
            color: var(--preto);
            line-height: 1.6;
        }

        /* --- Cabeçalho e Navegação --- */
        header {
            background-color: var(--preto);
            color: var(--branco);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            border-bottom: 4px solid var(--ciano);
        }

        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1rem 5%;
            max-width: 1200px;
            margin: 0 auto;
            transition: padding 0.4s ease;
        }

        .logo {
            display: flex;
            align-items: center; /* Garante que a logo fique alinhada com o menu */
        }

        .logo img {
            max-height: 80px; /* Controla a altura máxima da logo. Ajuste esse valor se precisar dela maior ou menor */
            width: auto;      /* Mantém a proporção da imagem sem esticar */
            transition: transform 0.3s ease, max-height 0.4s ease, margin 0.4s ease; 
            margin: 10px;

        }

        /* --- Efeito Menu Encolhido (Ativado via JavaScript) --- */
        header.rolagem nav {
            padding: 0.3rem 5%; /* Diminui o espaço interno do cabeçalho */
        }

        header.rolagem .logo img {
            max-height: 45px; /* Diminui a logo de 80px para 45px */
            margin: 5px;      /* Diminui a margem ao redor da logo */
        }

        /* Efeito leve ao passar o mouse sobre a logo */
        .logo:hover img {
            transform: scale(1.2);
        }

        nav ul {
            list-style: none;
            display: flex;
            gap: 1.5rem;
        }

        nav a {
            color: var(--branco);
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s;
        }

        nav a:hover {
            color: var(--amarelo);
        }

        /* --- Estilos do Menu Hambúrguer (Padrão: Escondido no Computador) --- */
        .hamburger {
            display: none;
            cursor: pointer;
        }

        .bar {
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            background-color: var(--branco);
        }

        /* --- Seções Gerais --- */
        section {
            padding: 5rem 5%;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }

        h2 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
            color: var(--preto);
            position: relative;
        }

        h2::after {
            content: '';
            display: block;
            width: 60px;
            height: 4px;
            background-color: var(--magenta);
            margin: 10px auto 0;
        }

        /* --- Início (Hero Section) --- */
        #inicio {
            /* Adicione uma imagem de fundo para o efeito de transparência aparecer */
            background-image: url('images/content/hero.jpg'); /* Substitua pelo nome da sua imagem */
            background-size: cover;
            background-position: center;
            background-color: var(--preto); /* Cor de segurança caso a imagem não carregue */
            
            color: var(--branco);
            text-align: center;
            align-items: center;
            min-height: 80vh;
            max-width: 100%;
            border-bottom: 8px solid var(--amarelo);
        }

        .hero-content {
            max-width: 800px;
            margin-top: 60px; /* Compensa o header fixo */
            
            /* --- AQUI ESTÁ A SUA FAIXA TRANSPARENTE --- */
            background-color: rgba(0, 0, 0, 0.5); /* Preto com 50% de transparência (o 0.5) */
            padding: 3rem 2rem; /* Espaçamento para o texto não colar nas bordas da faixa */
            border-radius: 12px; /* Deixa os cantos da faixa arredondados para ficar mais moderno */
            
            /* Dica Bônus: Esse comando abaixo cria um efeito de "vidro embaçado" (Glassmorphism) 
            que deixa o design incrível se você tiver uma imagem de fundo colorida */
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px); /* Para funcionar em navegadores da Apple */
        }

        .hero-content h1 {
            font-size: 3rem;
            margin-bottom: 1rem;
            
        }

        .hero-content p {
            font-size: 1.2rem;
            margin-bottom: 2rem;
            color: #cccccc;
        }

        .btn {
            display: inline-block;
            padding: 1rem 2rem;
            background-color: var(--magenta);
            color: var(--branco);
            text-decoration: none;
            font-weight: bold;
            border-radius: 5px;
            transition: transform 0.3s, background-color 0.3s;
        }

        .btn:hover {
            background-color: var(--ciano);
            transform: translateY(-3px);
        }

        #quem-somos {
            min-height: 50vh;
        }

        #servicos {
            min-height: 50vh;
        }

        #portfolio {
            min-height: 50vh;

        }

        #contato {
            min-height: 50vh;
            
        }

        /* --- Serviços --- */
        .cards-servicos {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
        }

        .card {
            background: var(--branco);
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-align: center;
            transition: transform 0.3s;
        }

        .card:hover {
            transform: translateY(-5px);
        }

        .card:nth-child(1) { border-top: 5px solid var(--ciano); }
        .card:nth-child(2) { border-top: 5px solid var(--magenta); }
        .card:nth-child(3) { border-top: 5px solid var(--amarelo); }

        .card h3 {
            margin-bottom: 1rem;
        }

        /* --- Portfólio Atualizado --- */
        .grid-portfolio {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .item-portfolio {
            height: 250px;
            border-radius: 8px;
            overflow: hidden; /* Garante que a imagem não vaze das bordas arredondadas */
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            background-color: #f0f0f0; /* Cor de fundo caso a imagem demore a carregar */
        }

        .item-portfolio img {
            width: 100%;
            height: 100%;
            object-fit: cover; /* Preenche todo o card cortando o excesso, sem amassar a imagem */
            display: block;
            transition: transform 0.4s ease; /* Suaviza o efeito de zoom */
}

/* Efeito ao passar o mouse (Hover) */
.item-portfolio:hover img {
    transform: scale(1.1); /* Dá um leve zoom na imagem */
}

        /* --- Contato --- */
        .form-contato {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 600px;
            margin: 0 auto;
            width: 100%;
        }

        .form-contato input,
        .form-contato textarea,
        .form-contato select { /* <-- Adicione o select aqui */
            padding: 1rem;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 1rem;
            background-color: var(--branco); /* Garante o fundo branco no menu */
            font-family: inherit;
        }


        .form-contato button {
            background-color: var(--ciano);
            color: var(--branco);
            border: none;
            padding: 1rem;
            font-size: 1.1rem;
            font-weight: bold;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .form-contato button:hover {
            background-color: var(--verde);
        }

        /* --- Rodapé em 4 Colunas --- */
        footer {
            background-color: var(--preto);
            color: var(--branco);
            padding: 4rem 5%; /* Deixei com mais espaço para o rodapé "respirar" */
            border-top: 4px solid var(--ciano); /* Fica um detalhe legal em cima! */
        }

        .footer-container {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr; /* Aqui criamos as 4 colunas */
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
            align-items: center; /* Alinha tudo verticalmente ao centro */
        }

        .footer-col {
            display: flex;
            flex-direction: column;
        }

        /* --- Redes Sociais no Rodapé --- */
        .redes-sociais {
            display: flex;
            justify-content: flex-start; /* No computador, os ícones ficam à esquerda */
            gap: 1.5rem;
        }

        .redes-sociais a {
            color: var(--branco);
            transition: transform 0.3s ease, color 0.3s ease;
            display: inline-block;
        }

        .redes-sociais svg {
            width: 30px;
            height: 30px;
        }

        /* Efeitos ao passar o mouse */
        .redes-sociais a:hover {
            transform: scale(1.2);
        }

        .redes-sociais a[title*="Instagram"]:hover { color: var(--magenta); }
        .redes-sociais a[title*="Facebook"]:hover { color: #1877F2; }
        .redes-sociais a[title*="YouTube"]:hover { color: #FF0000; }

        /* --- Logo da Agência no Rodapé --- */
        .agencia-col {
            align-items: center; /* Centraliza a logo dentro da coluna dela */
            text-align: center;
        }

        .desenvolvedor img {
            max-width: 160px; /* Tamanho da logo Aquarela */
            height: auto;
            opacity: 0.8;
            transition: opacity 0.3s ease, transform 0.3s ease;
        }

        .desenvolvedor a:hover img {
            opacity: 1;
            transform: scale(1.05);
        }

        /* Efeitos ao passar o mouse */
        .redes-sociais a:hover {
            transform: scale(1.2); /* O ícone dá uma "crescida" */
        }

        /* Cores exclusivas para cada rede ao passar o mouse */
        .redes-sociais a[title*="Instagram"]:hover {
            color: var(--magenta); /* Usa o magenta da sua paleta CMYK */
        }

        .redes-sociais a[title*="Facebook"]:hover {
            color: #1877F2; /* Azul oficial do Facebook */
        }

        .redes-sociais a[title*="YouTube"]:hover {
            color: #FF0000; /* Vermelho oficial do YouTube */
        }

        /* --- Estilos do Modal (Lightbox) --- */
        .modal {
            display: none; /* Fica oculto até a imagem ser clicada */
            position: fixed;
            z-index: 2000; /* Fica por cima de todo o site, incluindo o menu */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.85); /* Fundo preto semi-transparente */
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }

        .modal-conteudo {
            max-width: 90%;
            max-height: 85vh; /* Ocupa no máximo 85% da altura da tela */
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.5);
            animation: zoomIn 0.3s ease; /* Animação de entrada */
        }

        /* O botão de fechar (X) */
        .fechar {
            position: absolute;
            top: 20px;
            right: 40px;
            color: var(--branco);
            font-size: 40px;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s;
        }

        .fechar:hover {
            color: var(--ciano); /* Fica ciano ao passar o mouse */
        }

        /* Animação suave para a imagem aparecendo */
        @keyframes zoomIn {
            from { transform: scale(0.8); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        /* Muda o cursor nas imagens originais para indicar que podem ser ampliadas */
        .item-portfolio img {
            cursor: zoom-in;
        }

        /* --- Botão Flutuante do WhatsApp --- */
        .btn-whatsapp {
            position: fixed;
            bottom: 30px; /* Distância do fundo da tela */
            right: 30px;  /* Distância da lateral direita */
            background-color: #25D366; /* Verde oficial do WhatsApp */
            color: white;
            width: 65px;
            height: 65px;
            border-radius: 50%; /* Deixa o botão redondo */
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            z-index: 1000; /* Garante que fique por cima de todo o resto */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            animation: pulsar 2s infinite; /* Animação para chamar atenção */
        }

        /* Tira a cor azul padrão do link que pode afetar o SVG */
        .btn-whatsapp svg {
            fill: white; 
        }

        /* Efeito ao passar o mouse */
        .btn-whatsapp:hover {
            transform: scale(1.1);
            box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
            animation: none; /* Pausa a animação quando o mouse está em cima */
        }

        /* Animação de "pulso" contínuo para atrair o clique */
        @keyframes pulsar {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
            }
        }

        /* --- Responsividade (Mobile) --- */
            @media (max-width: 768px) {

                /* Ajustes do Rodapé para Celular */
                .footer-container {
                    grid-template-columns: 1fr; /* Transforma as 4 colunas em 1 só (empilha) */
                    text-align: center; /* Centraliza o texto */
                    gap: 3rem; /* Aumenta o espaço entre os blocos empilhados */
                }

                .footer-col {
                    align-items: center; /* Centraliza tudo dentro das colunas */
                }

                .redes-sociais {
                    justify-content: center; /* Centraliza os ícones sociais no celular */
                }

                .col-vazia {
                    display: none; /* Some com a coluna vazia no celular para não dar buraco */
                }

                /* Mostra o botão hambúrguer */
                .hamburger {
                    display: block;
                }

                /* Animação do botão virando um "X" quando clicado */
                .hamburger.active .bar:nth-child(2) {
                    opacity: 0;
                }
                .hamburger.active .bar:nth-child(1) {
                    transform: translateY(8px) rotate(45deg);
                }
                .hamburger.active .bar:nth-child(3) {
                    transform: translateY(-8px) rotate(-45deg);
                }

                /* Esconde o menu fora da tela e cria a "gaveta" lateral */
                .nav-menu {
                    position: fixed;
                    left: -100%;
                    top: 100px; /* Distância do topo para não cobrir a barra preta. Ajuste se precisar */
                    flex-direction: column;
                    background-color: var(--preto);
                    width: 100%;
                    text-align: center;
                    transition: 0.3s;
                    box-shadow: 0 10px 27px rgba(0, 0, 0, 0.5);
                    padding: 2rem 0;
                    gap: 2rem;
                }

                /* Traz o menu de volta para a tela quando a classe 'active' é adicionada */
                .nav-menu.active {
                    left: 0;
                }

                .logo img {
                    max-height: 55px;
                }
                
                /* --- Ajustes da Seção Início --- */
                #inicio {
                    padding-top: 120px; /* Reduzi o empurrão porque agora o menu não ocupa tanto espaço! */
                    min-height: 100vh;
                }

                .hero-content {
                    padding: 2rem 1.5rem;
                    margin-top: 0; 
                    width: 100%;
                }

                .hero-content h1 {
                    font-size: 1.8rem;
                }
                
                .hero-content p {
                    font-size: 1rem;
                    margin-bottom: 1.5rem;
                }

                section {
                    padding: 4rem 5%;
                }
            }

            /* --- Rodapé Moderno e Diagramado --- */
            footer {
                background-color: var(--preto);
                color: var(--branco);
                padding: 4rem 5%;
                border-top: 4px solid var(--ciano);
            }

            .footer-container {
                display: grid;
                /* Dá mais espaço para a 1ª coluna e distribui o resto harmoniosamente */
                grid-template-columns: 1.5fr 1fr 1fr 1fr; 
                gap: 2rem;
                max-width: 1200px;
                margin: 0 auto;
                align-items: start; /* MUITO IMPORTANTE: Alinha os elementos pelo topo! */
            }

            .footer-col {
                display: flex;
                flex-direction: column;
            }

            /* --- Coluna 1: Dados --- */
            .footer-col:nth-child(1) {
                text-align: left; /* Garante que o texto fique alinhado à esquerda */
            }

            /* --- Coluna 2: Redes Sociais --- */
            .redes-sociais {
                display: flex;
                justify-content: flex-start;
                gap: 1.5rem;
            }

            .redes-sociais a {
                color: var(--branco);
                transition: transform 0.3s ease, color 0.3s ease;
                display: inline-block;
            }

            .redes-sociais svg {
                width: 30px;
                height: 30px;
            }

            .redes-sociais a:hover { transform: scale(1.2); }
            .redes-sociais a[title*="Instagram"]:hover { color: var(--magenta); }
            .redes-sociais a[title*="Facebook"]:hover { color: #1877F2; }
            .redes-sociais a[title*="YouTube"]:hover { color: #FF0000; }

            /* --- Coluna 4: Logo da Agência --- */
            .agencia-col {
                align-items: flex-end; /* Joga a logo da agência para a extrema direita no PC */
                text-align: right;
            }

            .desenvolvedor img {
                max-width: 140px; /* Reduzi um pouco para ficar mais delicado */
                height: auto;
                opacity: 0.6; /* Um pouco mais transparente para focar nos dados da gráfica */
                transition: opacity 0.3s ease, transform 0.3s ease;
            }

            .desenvolvedor a:hover img {
                opacity: 1;
                transform: scale(1.05);
            }

            /* --- Seção Nossos Clientes (Carrossel) --- */
            #clientes {
            min-height: auto; /* Não precisa ocupar a tela toda */
            padding: 4rem 5%;
            background-color: var(--fundo);
            overflow: hidden; /* Evita que a barra de rolagem horizontal apareça */
            border-bottom: 5px solid var(--amarelo);
            }

            .carrossel-container {
            width: 100%;
            overflow: hidden;
            position: relative;
            padding: 20px 0;
            max-width: 1000px;
            margin: 0 auto;
        }

        /* Efeito de sombreamento (fade) branco nas laterais para o carrossel sumir suavemente */
        .carrossel-container::before,
        .carrossel-container::after {
            content: '';
            position: absolute;
            top: 0;
            width: 60px;
            height: 100%;
            z-index: 2;
        }
        
        .carrossel-container::before {
            left: 0;
            background: linear-gradient(to right, var(--fundo) 0%, rgba(244,244,249,0) 100%);
        }
        
        .carrossel-container::after {
            right: 0;
            background: linear-gradient(to left, var(--fundo) 0%, rgba(244,244,249,0) 100%);
        }

        .carrossel-track {
            display: flex;
            gap: 40px;
            width: max-content;
            /* A animação dura 20 segundos. Aumente para ficar mais lento ou diminua para acelerar */
            animation: rolarCarrossel 60s linear infinite;
        }

        /* Pausa a animação se o cliente colocar o dedo (celular) ou mouse por cima */
        .carrossel-track:hover {
            animation-play-state: paused;
        }

        /* A Moldura Redonda com Fundo Branco */
        .moldura-cliente {
            width: 130px;
            height: 130px;
            border-radius: 50%; /* Deixa perfeitamente redondo */
            background-color: var(--branco);
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 4px 10px rgba(0,0,0,0.08); /* Sombra leve e elegante */
            flex-shrink: 0;
            border: 2px solid #eaeaea; /* Bordinha cinza bem sutil */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .moldura-cliente:hover {
            transform: translateY(-5px); /* Dá um pulinho ao passar o mouse */
            box-shadow: 0 8px 15px rgba(0,0,0,0.15);
            border-color: var(--ciano); /* A borda fica ciano ao passar o mouse! */
        }

        .moldura-cliente img {
            max-width: 75%; /* Garante que a logo não grude nas bordas da moldura */
            max-height: 75%;
            object-fit: contain; /* Mantém a proporção da logo do cliente sem esticar */
        }

        /* O motor que faz o carrossel andar */
        @keyframes rolarCarrossel {
            0% { transform: translateX(0); }
            100% { transform: translateX(calc(-50% - 20px)); } /* Move exatamente metade do tamanho para o loop perfeito */
        }

        /* Ajuste para celular */
        @media (max-width: 768px) {
            .moldura-cliente {
                width: 100px;
                height: 100px;
            }

            /* --- Ajustes do Rodapé para Celular --- */
                .footer-container {
                    grid-template-columns: 1fr; /* Empilha as colunas */
                    gap: 3rem; /* Espaço de respiro entre os blocos */
                    align-items: center; /* No celular, voltamos a alinhar pelo centro */
                }

                .footer-col:nth-child(1),
                .agencia-col {
                    text-align: center; /* Centraliza o texto e logo no mobile */
                    align-items: center;
                }

                .redes-sociais {
                    justify-content: center; /* Centraliza os ícones no celular */
                }

                .col-vazia {
                    display: none; /* Esconde a coluna vazia no mobile */
                }
        }