/* Variáveis da Paleta de Cores */
:root {
    --azul-clio: #0056b3;
    --branco-gelo: #f4f7f6;
    --laranja-destaque: #ff8c00;
    --texto-escuro: #333333;
}

/* Estilos Gerais */
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--branco-gelo);
    color: var(--texto-escuro);
}

/* Home Banner com Fundo e Máscara Escura */
.home-banner {
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCn4lBzaOkmnlbZPwgOFl-k_9xQ2LDf9wZE76qZ9SbXqBjTHnUq-hml-CeLr78WkkgZSqNskdZpF2YK8K1LMNcmotpqIFRWuBx-RfCWYTlkESR7WRGfP9HbD6chnu8jTgJF5u3XPM9AErix85XBPjtYkfrNJsdPzMG9Je8HHC4myWfoiy9uwqh5YvulTQz/s16000/background.webp') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
}

.banner-content {
    padding: 0 20px;
}

/* Estilo da Logo */
.logo-home {
    max-width: 270px; /* Mantém o tamanho original proporiconal */
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.5)); /* Sombra para destacar do fundo */
}

/* Botões do Menu */
.menu-principal button {
    background: white;
    color: var(--azul-clio);
    border: none;
    padding: 15px 25px;
    margin: 10px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2); 
}

.menu-principal button:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
    color: white;
    background: var(--azul-clio); /* Fica azul ao passar o mouse */
}

/* Botão de Conversão */
.btn-destaque {
    background: var(--laranja-destaque) !important; 
    color: white !important;
}

.btn-destaque:hover {
    background: #e07b00 !important; /* Laranja mais escuro no hover */
}

/* Popups (Modais) */
/* Regra universal para todos os overlays de popup */
.popup-overlay, .lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: none; /* Começa totalmente removido */
    align-items: center;
    justify-content: center;
    z-index: -1; /* Fica atrás de tudo quando fechado */
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* A "Chave" que liga o popup */
.popup-overlay.ativo, .lightbox-overlay.ativo {
    display: flex !important;
    z-index: 99999 !important; /* Pula para a frente de tudo */
    opacity: 1 !important;
}

.popup-conteudo {
    background: var(--branco-gelo);
    padding: 40px;
    border-radius: 12px;
    width: 80%;
    max-width: 800px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    transform: scale(0.9);
    transition: transform 0.4s ease;
    max-height: 80vh;
    overflow-y: auto; /* Permite rolar se o conteúdo for longo */
}

.popup-overlay.ativo .popup-conteudo {
    transform: scale(1);
}

.titulo-azul {
    color: var(--azul-clio);
    margin-top: 0;
}

.fechar-popup {
    float: right;
    font-size: 32px;
    cursor: pointer;
    color: #888;
    line-height: 1;
}

.fechar-popup:hover { color: var(--laranja-destaque); }


/* =========================================
   DESIGN RESPONSIVO (Celulares e Tablets)
   ========================================= */
   @media (max-width: 768px) {
    .logo-home {
        max-width: 250px; /* Logo menor no celular */
    }

    .menu-principal {
        display: flex;
        flex-direction: column; /* Empilha os botões */
        gap: 15px;
    }

    .menu-principal button {
        width: 100%; /* Botão ocupa a tela toda */
        margin: 0;
    }

    .popup-conteudo {
        width: 90%;
        padding: 25px;
    }
}

/* =========================================
   GALERIA MASONRY E EFEITOS (Portfólio)
   ========================================= */

/* Layout Assimétrico (Masonry) usando Colunas */
.galeria-masonry {
    column-count: 3; /* 3 colunas no computador */
    column-gap: 15px; /* Espaço entre as colunas */
    margin-top: 30px;
}

/* O "Cartão" de cada foto */
.item-galeria {
    break-inside: avoid; /* Evita que a foto seja cortada no meio da coluna */
    margin-bottom: 15px;
    position: relative;
    border-radius: 8px;
    overflow: hidden; /* Mantém o zoom contido nas bordas arredondadas */
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* A Imagem dentro do Cartão */
.item-galeria img {
    width: 40%;
    display: block;
    transition: transform 0.4s ease; /* Animação suave para o zoom */
}

/* A Camada Escura que aparece no Hover */
.overlay-hover {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 86, 179, 0.85); /* Azul institucional transparente */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Escondido por padrão */
    transition: opacity 0.4s ease;
}

/* O Texto que aparece no Hover */
.titulo-servico {
    color: white;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    padding: 10px;
    transform: translateY(20px); /* Começa um pouco para baixo */
    transition: transform 0.4s ease;
}

/* EFEITOS QUANDO O MOUSE PASSA (HOVER) */
.item-galeria:hover img {
    transform: scale(1.1); /* Dá um zoom de 10% na foto */
}

.item-galeria:hover .overlay-hover {
    opacity: 1; /* Revela a cor azul */
}

.item-galeria:hover .titulo-servico {
    transform: translateY(0); /* Sobe o texto suavemente */
}

/* =========================================
   LIGHTBOX FUTURISTA (TELA CHEIA)
   ========================================= */

.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Fundo quase preto para dar foco total à foto */
    z-index: 10000; /* Garante que fique acima de TUDO */
    display: none; /* Começa escondido */
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px); /* Desfoca o fundo do site atrás da foto */
    transition: opacity 0.3s ease;
}

.lightbox-overlay.ativo {
    display: flex; /* Aparece quando clicado */
}

.container-foto-full {
    max-width: 90%;
    max-height: 85%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#img-lightbox {
    max-width: 95vw;   /* Ocupa até 95% da largura da janela */
    max-height: 85vh;  /* Ocupa até 85% da altura da janela */
    width: auto;       /* Mantém a proporção original */
    height: auto;      /* Mantém a proporção original */
    display: block;
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0,0,0,0.8);
    object-fit: contain; /* Garante que a foto inteira apareça sem cortes */
    
    /* Efeito de suavidade ao carregar */
    animation: zoomSuave 0.4s ease-out;
}

@keyframes zoomSuave {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.lightbox-overlay.ativo #img-lightbox {
    transform: scale(1); /* Faz o efeito de "pular" na tela */
}

/* --- BOTÕES DE NAVEGAÇÃO --- */
.btn-nav {
    position: absolute;
    top: 50%; /* Empurra para a exata metade da tela */
    transform: translateY(-50%); /* Ajuste fino para a seta ficar perfeitamente no meio */
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    font-size: 30px;
    padding: 20px;
    cursor: pointer;
    border-radius: 50%;
    transition: all 0.3s;
    z-index: 10001;
}

.btn-nav:hover {
    background: var(--azul-clio);
    /* O SEGREDO ESTÁ AQUI: Repetimos o alinhamento junto com o efeito de crescer */
    transform: translateY(-50%) scale(1.1);
}

.btn-prev { left: 5%; }
.btn-next { right: 5%; }

.fechar-lightbox {
    background-color: transparent;
    border: none;
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 35px;
    cursor: pointer;
    z-index: 10002;
    transition: color 0.3s;
}

.fechar-lightbox:hover { color: var(--laranja-destaque); }

.contador-fotos {
    position: absolute;
    bottom: 20px;
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    letter-spacing: 2px;
}

/* --- AJUSTE PARA CELULAR --- */
@media (max-width: 768px) {
    .btn-nav {
        padding: 10px;
        font-size: 20px;
        background: rgba(0,0,0,0.5); /* Fica mais visível no celular */
    }
    
    .btn-prev { left: 2%; }
    .btn-next { right: 2%; }
    
    .fechar-lightbox {
        top: 10px;
        right: 20px;
    }
}

/* =========================================
   POPUP: A CLIO SERVIÇOS (Layout e Textos)
   ========================================= */

/* Centraliza a logo e coloca uma linha divisória discreta */
.sobre-header {
    text-align: center;
    margin-bottom: 25px;
    border-bottom: 2px solid #e0e6ed;
    padding-bottom: 15px;
}

.logo-menu {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
    /* display: block; margin-left: 0%; margin-right: auto; */
}

/* Espaçamento agradável para leitura */
.sobre-texto p {
    line-height: 1.7;
    color: var(--texto-escuro);
    margin-bottom: 15px;
    font-size: 16px;
}

.sobre-texto h3 {
    color: var(--azul-clio);
    margin-top: 30px;
    margin-bottom: 15px;
    font-size: 22px;
}

/* Estilo da lista de Expertise (Cartões) */
.lista-expertise {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

.lista-expertise li {
    background: white;
    border-left: 4px solid var(--laranja-destaque);
    padding: 12px 15px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    color: var(--azul-clio);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    flex: 1 1 calc(50% - 15px); /* Ocupa metade da largura disponível */
}

/* Bloco de Destaque para o "Diferencial" */
.sobre-diferencial {
    background-color: #eaf1f8; /* Azul bem claro e institucional */
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #c9d8e5;
}

.sobre-diferencial h3 {
    margin-top: 0;
}

.sobre-diferencial p {
    margin-bottom: 0;
}

/* Responsividade: Garante que os cartões fiquem um embaixo do outro no celular */
@media (max-width: 600px) {
    .lista-expertise li {
        flex: 1 1 100%;
    }
}

/* =========================================
   POPUP: CANAL DIRETO (Contato e Formulário)
   ========================================= */

/* Deixa o popup de contato um pouco mais largo para acomodar as duas colunas */
.popup-largo {
    max-width: 900px;
}

.contato-header {
    text-align: center;
    margin-bottom: 30px;
}

.logo-contato {
    max-width: 160px; /* Logo menor conforme solicitado */
    height: auto;
}

.contato-header p {
    color: #666;
    margin-top: -10px;
}

/* Grid para dividir em 2 colunas */
.contato-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    background: white;
    padding: 20px;
    border-radius: 8px;
}

/* Lado Esquerdo: Dados da Empresa */
.contato-info h3, .contato-form-area h3 {
    color: var(--azul-clio);
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 20px;
}

.dados-empresa {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    color: var(--texto-escuro);
    line-height: 1.8;
}

.nome-empresa {
    font-size: 18px;
    font-weight: bold;
    color: var(--azul-clio);
    margin-bottom: 10px;
}

/* Botão do WhatsApp (Verde característico) */
.btn-whatsapp {
    display: inline-block;
    background-color: #25D366;
    color: white;
    text-decoration: none;
    padding: 15px 25px;
    border-radius: 6px;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.3);
    width: calc(100% - 50px); /* Preenche o espaço com margem */
}

.btn-whatsapp:hover {
    background-color: #1ebc5a;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(37, 211, 102, 0.5);
}

/* Lado Direito: Formulário */
.formulario-moderno {
    display: flex;
    flex-direction: column;
}

.grupo-input {
    margin-bottom: 15px;
}

.grupo-input label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}

.grupo-input input,
.grupo-input textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box; /* Garante que o padding não quebre a largura */
}

/* Efeito ao clicar no campo do formulário (Foco) */
.grupo-input input:focus,
.grupo-input textarea:focus {
    border-color: var(--azul-clio);
    outline: none;
    box-shadow: 0 0 8px rgba(0, 86, 179, 0.2);
}

.btn-enviar {
    background-color: var(--laranja-destaque);
    color: white;
    border: none;
    padding: 15px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-enviar:hover {
    background-color: #e07b00;
}

/* Responsividade: Empilha as colunas no Celular e Tablet */
@media (max-width: 768px) {
    .contato-container {
        grid-template-columns: 1fr; /* Muda para 1 coluna */
        gap: 30px;
    }
    
    .btn-whatsapp {
        width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   CONTROLES DO CARROSSEL (Lightbox)
   ========================================= */

/* Botões de Navegação (Setas) */
.btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border: none;
    font-size: 40px;
    padding: 15px 20px;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    z-index: 10001; /* Fica acima da imagem */
    border-radius: 8px;
}

.btn-nav:hover {
    background-color: var(--laranja-destaque);
    color: white;
}

.btn-prev { left: 20px; }
.btn-next { right: 20px; }

/* Contador de Fotos (Ex: 1 / 6) */
.contador-fotos {
    position: absolute;
    bottom: 30px;
    color: white;
    font-size: 18px;
    font-weight: bold;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 15px;
    border-radius: 20px;
    letter-spacing: 2px;
}

/* Esconde as setas se a tela for muito pequena, o usuário clica nas bordas (opcional) */
@media (max-width: 600px) {
    .btn-nav {
        font-size: 24px;
        padding: 10px;
    }
}

/* =========================================
   RODAPÉ (FOOTER)
   ========================================= */
.rodape-site {
    background-color: #f8f9fa; /* Um cinza quase branco, muito elegante */
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    text-align: center;
}

.rodape-site p {
    color: #6c757d; /* Tom de cinza suave para o texto */
    font-size: 14px;
    margin: 0;
    letter-spacing: 0.5px;
}

.rodape-site strong {
    color: var(--azul-clio); /* Usa o azul da sua marca no nome */
}

/* Garante que o rodapé não fique colado no conteúdo em telas menores */
@media (max-width: 768px) {
    .rodape-site {
        padding: 15px 10px;
    }
}

/* =========================================
   RODAPÉ TRANSPARENTE (Integrado ao Banner)
   ========================================= */

/* Precisamos garantir que o banner ocupe exatamente a tela e seja a base para o rodapé */
.home-banner {
    position: relative; /* Permite posicionar o rodapé no fundo */
    height: 100vh;      /* Garante que o banner ocupe 100% da altura da tela */
    overflow: hidden;   /* Impede qualquer barra de rolagem acidental */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.rodape-transparente {
    position: absolute;
    bottom: 20px;       /* Distância do fundo da tela */
    width: 100%;
    text-align: center;
    background: transparent;
    z-index: 5;         /* Garante que fique acima do fundo, mas abaixo dos modais */
}

.rodape-transparente p {
    color: rgba(255, 255, 255, 0.7); /* Branco com 70% de transparência para ser discreto */
    font-size: 15px;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Sombra leve para ler sobre qualquer imagem */
}

.rodape-transparente strong {
    color: #fff; /* Nome da empresa em branco sólido para destaque */
    font-weight: 600;
}

/* Ajuste para telas pequenas */
@media (max-width: 768px) {
    .rodape-transparente {
        bottom: 10px;
    }
    .rodape-transparente p {
        font-size: 13px;
    }
}

/* =========================================
   MODAL: ECOSSISTEMA DE SERVIÇOS
   ========================================= */

.servicos-header {
    text-align: center;
    margin-bottom: 30px;
}

.texto-destaque {
    font-size: 16px;
    line-height: 1.7;
    color: #444;
    background-color: #f4f7fa; /* Fundo levemente azulado para destacar a introdução */
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--azul-clio);
    text-align: justify;
}

/* --- GRADE DOS 9 SERVIÇOS --- */
.grid-servicos {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Cria 3 colunas iguais no desktop */
    gap: 20px;
    margin-bottom: 40px;
}

.card-servico {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-servico:hover {
    transform: translateY(-5px); /* Efeito de flutuar ao passar o mouse */
    box-shadow: 0 8px 15px rgba(0,0,0,0.08);
    border-color: var(--laranja-destaque); /* A borda acende em laranja */
}

.icone-servico {
    font-size: 35px;
    margin-bottom: 15px;
}

.card-servico h3 {
    color: var(--azul-clio);
    font-size: 17px;
    margin-top: 0;
    margin-bottom: 10px;
}

.card-servico p {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

/* --- SEÇÃO DOS CLIENTES (Preto e Branco -> Colorido) --- */
.secao-clientes-modal {
    border-top: 1px solid #ddd;
    padding-top: 30px;
    text-align: center;
}

.secao-clientes-modal h3 {
    color: #555;
    font-size: 16px;
    margin-bottom: 20px;
}

.grid-clientes-logos {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permite que os cards pulem de linha se não couberem */
    gap: 15px;
}

/* O Quadrado do Cliente */
.card-logo-cliente {
    width: 100px;
    height: 100px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    transition: all 0.4s ease;
    cursor: default;
}

/* A Imagem dentro do Quadrado (Começa Cinza) */
.card-logo-cliente img {
    max-width: 100%;
    max-height: 100%;
    filter: grayscale(100%); /* Deixa totalmente preto e branco */
    opacity: 0.6; /* Deixa um pouco "apagado" */
    transition: all 0.4s ease;
}

/* O Efeito Hover (Quando o mouse passa em cima) */
.card-logo-cliente:hover {
    box-shadow: 0 10px 20px rgba(0, 86, 179, 0.15); /* Sombra suave com tom de azul */
    border-color: var(--azul-clio);
    transform: translateY(-3px);
}

.card-logo-cliente:hover img {
    filter: grayscale(0%); /* Remove o preto e branco, devolvendo a cor original */
    opacity: 1; /* Tira a transparência, deixando a cor viva */
}

/* --- RESPONSIVIDADE (Celular e Tablet) --- */
@media (max-width: 900px) {
    .grid-servicos {
        grid-template-columns: repeat(2, 1fr); /* Cai para 2 colunas em telas médias */
    }
}

@media (max-width: 600px) {
    .grid-servicos {
        grid-template-columns: 1fr; /* Fica em 1 coluna só no celular */
    }
    
    .texto-destaque {
        font-size: 16px;
        text-align: left;
    }

    .card-logo-cliente {
        width: 80px; /* Reduz um pouco o tamanho dos quadrados no celular */
        height: 80px;
    }
}

/* =========================================
   GALERIA DE PORTFÓLIO FUTURISTA
   ========================================= */

.portfolio-header {
    text-align: center;
    margin-bottom: 40px;
}

.galeria-futurista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    padding: 10px;
}

.card-projeto {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    cursor: pointer;
    background: #1a1a1a;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.moldura-foto {
    position: relative;
    aspect-ratio: 1 / 1; /* Mantém os cards sempre quadrados e organizados */
}

.card-projeto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}

/* Efeito de Vidro Fosco (Glassmorphism) no Hover */
.overlay-futurista {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 48, 102, 0.4); /* Azul Clio semi-transparente */
    backdrop-filter: blur(0px);
    display: flex;
    align-items: flex-end;
    padding: 25px;
    opacity: 0;
    transition: all 0.4s ease;
}

.info-projeto {
    transform: translateY(20px);
    transition: all 0.4s ease;
    width: 100%;
}

.info-projeto .categoria {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--laranja-destaque);
    font-weight: bold;
}

.info-projeto h3 {
    color: white;
    margin: 5px 0 15px 0;
    font-size: 20px;
}

.btn-ver-mais {
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,0.5);
    color: white;
    font-size: 12px;
    border-radius: 30px;
    transition: all 0.3s;
}

/* --- EFEITOS DE MOVIMENTO NO HOVER --- */

.card-projeto:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 86, 179, 0.3); /* Brilho azul no fundo */
}

.card-projeto:hover img {
    transform: scale(1.15) rotate(2deg); /* Zoom com leve inclinação */
}

.card-projeto:hover .overlay-futurista {
    opacity: 1;
    backdrop-filter: blur(5px); /* Efeito de vidro desfocado */
}

.card-projeto:hover .info-projeto {
    transform: translateY(0);
}

.btn-ver-mais:hover {
    background: white;
    color: var(--azul-clio);
}

/* Ajuste Mobile */
@media (max-width: 600px) {
    .galeria-futurista {
        grid-template-columns: 1fr; /* Uma coluna no celular para destaque total */
    }
}

/* =========================================
   CENTRALIZAR GALERIA (APENAS DESKTOP)
   ========================================= */

@media (min-width: 769px) {
    .galeria-futurista {
        display: flex; /* Muda o comportamento para flexível */
        justify-content: center; /* O segredo que centraliza os cartões no meio */
        flex-wrap: wrap; /* Permite que os cartões pulem de linha se tiver muitos */
    }
    
    .card-projeto {
        width: 320px; /* Trava o tamanho do quadrado para não esticar demais */
        flex-grow: 0;
    }
}

/* =========================================
   POPUP OBRIGADO (ESTILO PREMIUM)
   ========================================= */

.popup-agradecimento {
    max-width: 450px;
    text-align: center;
    padding: 40px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 48, 102, 0.1);
}

.logo-agradecimento {
    max-width: 150px;
    margin-bottom: 30px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.check-mark {
    display: inline-block;
    width: 60px;
    height: 60px;
    line-height: 60px;
    background-color: #28a745; /* Verde Sucesso */
    color: white;
    font-size: 30px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.popup-agradecimento p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* No seu style.css, procure ou adicione isso */
#popup-obrigado {
    z-index: 99999 !important; /* Isso coloca o popup na frente de absolutamente tudo */
    display: none; /* Garante que ele comece escondido */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85); /* Fundo escuro para destacar o sucesso */
}

/* =========================================
   PORTFÓLIO: CARDS MODERNOS
   ========================================= */

.grade-portfolio-moderna {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    padding: 20px 0;
}

.card-portfolio {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: relative;
    overflow: hidden;
}

.card-portfolio:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 48, 102, 0.15); /* Sombra com o tom da sua marca */
    border-color: var(--azul-clio);
}

.icone-portfolio {
    font-size: 45px;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.card-portfolio:hover .icone-portfolio {
    transform: scale(1.1);
}

.card-portfolio h3 {
    color: var(--azul-clio);
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.card-portfolio p {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.link-galeria {
    display: inline-block;
    color: var(--laranja-destaque); /* Ou a cor de destaque que preferir */
    font-weight: bold;
    font-size: 0.9rem;
    opacity: 0.8;
    transition: opacity 0.3s;
}

.card-portfolio:hover .link-galeria {
    opacity: 1;
}

/* Garanta que o Lightbox seja o 'Rei' da página */
/* Estado do Lightbox fechado */
#meu-lightbox {
    display: none !important; /* Força o desaparecimento */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 1000000; /* Fica acima de TUDO */
    align-items: center;
    justify-content: center;
}

/* Estado do Lightbox quando você clica na foto (Aberto) */
#meu-lightbox.ativo {
    display: flex !important; /* Força o aparecimento */
}

/* Botão de Fechar Moderno */
.btn-fechar-sucesso {
    background-color: transparent; /* Laranja Sucesso */
    color: #E07B00;
    border: none;
    padding: 8px 26px;
    font-size: 22px;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    transform: scale(0.8);
    margin-top: 20px;
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); */
}

.btn-fechar-sucesso:hover {
    background-color: transparent;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 175, 2, 0.169);
}

.btn-fechar-sucesso:active {
    transform: translateY(0);
}

/* O estado padrão: SEMPRE escondido e sem bloquear cliques */
/* Estado padrão: Escondido de qualquer jeito */
.popup-overlay {
    display: none !important; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

/* Estado ativo: Aparece apenas com a classe ativo */
.popup-overlay.ativo {
    display: flex !important;
}

.h1-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Preloader Estilizado */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0d0d0d; /* Fundo preto imediato */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000; /* Acima de TUDO */
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

.loader-content {
    text-align: center;
}

.loader-content img {
    width: 180px;
    margin-bottom: 20px;
    animation: pulse 1.5s infinite ease-in-out;
}

/* Spinner de carregamento técnico */
.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255, 255, 255, 0.2);
    border-top: 3px solid var(--vermelho-tecnico);
    border-radius: 50%;
    margin: 0 auto;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1); }
}

/* Classe para remover o loader via JS */
#preloader.loaded {
    opacity: 0;
    visibility: hidden;
}