:root {
--primary-color: #000000; /* Preto (Texto Principal) */
--accent-color: #0519ff;  /* Amarelo/Ouro (Destaque/CTA) */
--background-light: #F8F8F8; /* Fundo Principal (Quase Branco) */
--metallic-gray: #3f3c3c; /* Cinza Metálico para fundos de destaque */
}

/* ⚙️ Básico e Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Arial, sans-serif; 
scroll-behavior: smooth;
}

body {
background-color: var(--background-light);
color: var(--primary-color);
}

/* Utilidades */
.text-center { text-align: center; } 

h2 {
font-size: 2em;
 margin-bottom: 40px;
text-align: center;
}
.light-text { color: white; }
.accent-text { color: var(--accent-color); }
.section-padding { padding: 80px 5%; }

.section-subtitle {
text-align: center;
margin-bottom: 30px;
font-size: 1.1em;
}




/* ------------------------------------------- */
/* Estrutura de Camadas (Overlay) para Fundos */
/* ------------------------------------------- */

/* Todas as seções principais terão essa estrutura base para fundo */
.hero, #socios, .background-dark, #servicos, #depoimentos, .callout-section, footer {
    position: relative;
    z-index: 1;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}




/* O Overlay (::before) para todas as seções, fica na camada 2 */
.hero::before, #socios::before, .background-dark::before, #servicos::before, #depoimentos::before, .callout-section::before, footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}




/* O Conteúdo (Camada 3) - Fica acima do overlay e da imagem */
.hero-content, #socios h2, .socios-container, 
#diferenciais h2, #diferenciais .section-subtitle, .diferenciais-container,
#servicos h2, #servicos .section-subtitle, .servicos-grid,
#portfolio h2, #portfolio .section-subtitle, .portfolio-grid, .btn-secondary,
#depoimentos h2, #depoimentos .section-subtitle, .depoimentos-container,
.callout-section h2, .callout-section p, .callout-section .cta-main,
.footer-content, .copyright {
    position: relative;
    z-index: 3;
}




/* ------------------------------------------- */
/* Fim da Estrutura de Camadas */
/* ------------------------------------------- */


/* ⚡️ HEADER/NAV - Menu Fixo (Sticky) */
#main-header {
display: flex;
justify-content: space-between;
align-items: center;
 padding: 15px 5%;
background-color: var(--primary-color);
color: white;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
position: sticky;
 top: 0;
z-index: 1000;
}
#main-nav a {
color: white;
text-decoration: none;
margin-left: 20px;
 transition: color 0.3s;
}
#main-nav a:hover { 
    color: var(--accent-color); 
}

.menu-toggle { 
    display: none;
 }


.cta-nav {
background-color: var(--accent-color);
color: var(--primary-color);
border: none;
padding: 8px 15px;
 border-radius: 5px;
font-weight: bold;
cursor: pointer;
margin-left: 20px;
transition: transform 0.2s;
}

.cta-nav:hover { 
    transform: scale(1.05);
 }



/* logo */

.logo {
display: flex;
align-items: center;
font-weight: bold;
font-size: 1.5em;
}

.logo-img {
height: 50px;
margin-right: 10px;
filter: invert(1); 
border-radius: 10%;
}

 




/* ⚡️ SECTION HERO */
.hero {
background-color: var(--metallic-gray); 
color: white;
text-align: center;
padding: 140px 20px; 
min-height: 650px; 
display: flex;
align-items: center;
justify-content: center;
background-image: url('/fundoinicio.png');
}

.hero::before {
    background-color: rgba(0, 0, 0, 0.5); 
}

.hero h1 { 
    font-size: 3em; 
    margin-bottom: 15px;
    color: white;
}

.hero p {
    color: white;
}


/* BOTÕES CTA */
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(163, 163, 162, 0.7); }
70% { box-shadow: 0 0 0 20px rgba(255, 199, 0, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 199, 0, 0); }
}

.pulse { 
    animation: pulse 2s infinite; 
}

.cta-main {
margin-top: 30px; 
background-color: var(--accent-color);
color: var(--primary-color);
border: none;
padding: 15px 35px;
font-size: 1.2em;
font-weight: bold;
border-radius: 8px;
cursor: pointer;
transition: background-color 0.3s;
}

.cta-main:hover { 
    background-color: #ffffff; 
}




/* Botão Secundário (Solicitar Visita Técnica) */
.btn-secondary {
background-color: white;
color: var(--primary-color);
border: 2px solid var(--accent-color);
padding: 10px 20px;
font-weight: bold;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}

.btn-secondary:hover { 
background-color: var(--accent-color); 
color: var(--primary-color);
}
/* Estado inicial (invisível e levemente abaixo) */
.section-hidden {
    opacity: 0;
    transform: translateY(50px); /* Começa 50px abaixo */
    transition: opacity 1s ease-out, transform 1s ease-out; /* Transição suave de 1 segundo */
}

/* Estado visível (quando a seção entra na tela) */
.section-visible {
    opacity: 1;
    transform: translateY(0); /* Volta à posição normal */
}





/* ⚡️ SECTION SÓCIOS - Cards Flip (Trajetória e Expertise) */
#socios {
    background-color: var(--background-light);
    
 border-top: 3px solid var(--accent-color);
}
#socios::before {
    background-color: rgba(0, 0, 0, 0.6);
     background-image: url('/fundoescuro.png'); 
}
#socios h2 {
    color: white;
}
.socios-container {
display: flex;
justify-content: center;
gap: 50px;
}
.flip-card {
background-color: transparent;
width: 350px;
height: 450px;
perspective: 1000px; 
cursor: pointer;
}
.flip-card-inner {
position: relative;
 width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.flip-card:hover .flip-card-inner,
.flip-card.flipped .flip-card-inner {
 transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
 height: 100%;
-webkit-backface-visibility: hidden; 
 backface-visibility: hidden;
 border-radius: 10px;
padding: 30px;
 display: flex; 
  flex-direction: column;
align-items: center;
 justify-content: center;
}
.flip-card-front { 
background-color: white; 
 box-shadow: 0 0 10px rgba(0,0,0,0.1); 
}
.flip-card-back {
background-color: var(--accent-color);
color: var(--primary-color);
transform: rotateY(180deg); 
text-align: left;
padding: 40px;
}
.socio-foto {
 width: 150px;
height: 150px;
 border-radius: 50%;
object-fit: cover;
border: 5px solid var(--accent-color);
 margin-bottom: 15px;
 opacity: 1;
 z-index: 2; 
}
.spec-tag { 
    color: var(--primary-color); 
    font-size: 0.9em; 
    font-weight: bold; 
    margin-top: 5px; 
}

.action-hint { 
    font-size: 0.75em; 
    color: #999; 
    margin-top: 15px;
}

.highlight-back { 
    font-weight: bold;
     color: white;
      margin-top: 15px;
    }






/* ⚡️ SECTION DIFERENCIAIS (e PORTFOLIO) - Classe .background-dark */
.background-dark { 
background-color: var(--metallic-gray); 
    background-image: url('/fundofios.png'); 
}
.background-dark::before {
    background-color: rgba(0, 0, 0, 0.3);
}
.background-dark h2, .background-dark .section-subtitle {
    color: white;
}

.diferenciais-container {
display: flex;
justify-content: space-around;
 gap: 30px;
}

#diferenciais {
    border-top: 3px solid var(--accent-color);
    /* Garante que a borda não fique por baixo do padding da seção */
    padding-top: 77px; 
}
#portfolio {
    border-top: 3px solid var(--accent-color);
    /* Garante que a borda não fique por baixo do padding da seção */
    padding-top: 77px; 
    
    background-image: url('/fundoescuro.png'); 
}

/* ⚡️ SECTION PORTFÓLIO (Usa a classe .background-dark) */
.portfolio-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
 gap: 20px;
}
.portfolio-item img {
    width: 100%;             /* Garante que a imagem ocupe a largura total do card */
    height: 100%;            /* Garante que a imagem ocupe a altura total do card */
    object-fit: cover;       /* <--- ESTA É A PROPRIEDADE CHAVE! */
    object-position: center; /* (Opcional) Centraliza o foco da imagem */
    transition: transform 0.3s ease; /* Adiciona um efeito suave ao hover */
}

/* E, opcionalmente, um efeito de zoom no hover */
.portfolio-item:hover img {
    transform: scale(1.05);
}
.portfolio-item {
 position: relative;
 overflow: hidden;
 border-radius: 8px;
 box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
 height: 300px;

}

.diferencial-item {
text-align: center;
max-width: 300px;
padding: 30px 20px;
 border-radius: 8px;
 background-color: white;
    color: var(--primary-color);
border-top: 3px solid var(--accent-color);
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

}

.diferencial-item h3 { 
    margin: 10px 0;
 }

.diff-icon { 
    font-size: 3em; 
}






/* ⚡️ SECTION SERVIÇOS */
#servicos {
    background-color: var(--background-light);
    background-image: url('/fundosolido.png'); 
 border-top: 3px solid var(--accent-color);
}

#servicos::before {
    background-color: rgba(0, 0, 0, 0.6);
}

#servicos h2 {
    color: white;
}

.servicos-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
 gap: 30px;
 margin-top: 30px;
}

.servico-item {
 background-color: var(--primary-color);
 color: white;
padding: 30px;
 border-radius: 8px;
 text-align: left;
 border-bottom: 5px solid var(--accent-color); 
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.servico-item:hover {
 transform: translateY(-8px);
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.icon-main {
 font-size: 2.5em;
 color: var(--accent-color);
 margin-bottom: 15px;
}
.servico-item h3 { margin-bottom: 10px; color: var(--accent-color); }
.btn-detalhe {
 background-color: #333;
 color: white;
 border: none;
padding: 8px 15px;
 border-radius: 4px;
 margin-top: 15px;
cursor: pointer;
 transition: background-color 0.3s;
}
.btn-detalhe:hover { 
 background-color: var(--accent-color); 
 color: var(--primary-color); 
}







/* ⚡️ SECTION DEPOIMENTOS */
#depoimentos {
    background-color: var(--background-light);
    background-image: url('/fundocoment.png');
    
    
 border-top: 3px solid var(--accent-color);
}
#depoimentos::before {
    background-color: rgba(0, 0, 0, 0.6);
}
#depoimentos h2 {
    color: white;
}
.depoimentos-container {
 display: flex;
justify-content: center;
 gap: 30px;
}
.depoimento-card {
 background-color: white;
 padding: 30px;
 border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 max-width: 350px;
position: relative;
border-top: 3px solid var(--accent-color);
}




/* ⚡️ CHAMADA FINAL (ÚLTIMO BLOCO) */
.callout-section {
background-color: white;
 border-top: 3px solid var(--accent-color);
    background-image: url('/fundomordd.png');
    min-height: 460px;
}
.callout-section::before {
    background-color: rgba(0, 0, 0, 0.5);

}
.callout-section h2, .callout-section p {
 text-align: center; 
    /* color: white; */
}





/* ⚡️ FOOTER (Estilização garantida) */
footer {
 background-color: var(--primary-color);
 color: white;
padding: 20px 5%;
font-size: 0.9em;
 border-top: 3px solid var(--accent-color);

}
footer::before {
    background-color: rgba(0, 0, 0, 0.7);
}
.footer-content {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-bottom: 20px;
text-align: left; 
}
.footer-item { margin-bottom: 20px; }
.footer-item h4 { color: var(--accent-color); margin-bottom: 10px; }
.footer-item p { margin-bottom: 5px; }
.social-links a {
 color: white;
font-size: 1.5em;
 margin-right: 15px;
transition: color 0.3s;
}
.social-links a:hover { color: var(--accent-color); }
.copyright { text-align: center; border-top: 1px solid #444; padding-top: 20px;}







/* ------------------------------------------- */
/* 12. RESPONSIVIDADE (Tablets e Celulares) - OTIMIZADA */
/* ------------------------------------------- */
/* ------------------------------------------- */
/* 12. RESPONSIVIDADE (Tablets e Celulares) - OTIMIZADA FINAL */
/* ------------------------------------------- */
@media (max-width: 768px) {
    /* Padding padrão em mobile reduzido para melhor uso do espaço */
    .section-padding { padding: 40px 5%; } 
    
    /* Títulos Principais */
    h2 { 
        font-size: 1.8em; /* Títulos menores */
        margin-bottom: 30px;
    }

    /* Correção de Fundo/Paralaxe para Mobile */
    .hero, #socios, .background-dark, #servicos, #depoimentos, .callout-section, footer {
        /* Remove o efeito paralaxe para evitar cortes e bugs */
        background-attachment: scroll !important; 
        /* Garante que a imagem se ajuste bem */
        background-size: cover !important; 
    }

    /* 1. Menu Mobile */
    #main-header { 
        flex-wrap: wrap; /* Permite que o menu e o logo se quebrem */
    }
    #main-nav { 
        display: none; /* O padrão é fechado */
        width: 100%; 
        flex-direction: column; 
        text-align: center; 
        padding-bottom: 10px;
        /* Adiciona um background para o menu suspenso ficar visível */
        background-color: var(--primary-color);
    }
    /* ESTADO ABERTO: Quando o header tem a classe 'active' (JS) */
    #main-header.active #main-nav { 
        display: flex; /* O menu é exibido! */
    }

    /* Botão Hamburger */
    .menu-toggle { 
        display: block; 
        background: none; 
        border: none; 
        color: white; 
        font-size: 1.5em; 
        cursor: pointer; 
    }
    /* Restante da navegação */
    #main-nav a, .cta-nav { margin: 10px 0; }

    /* 2. Hero */
    .hero {
        min-height: 500px; /* Altura mínima reduzida */
        padding: 100px 20px;
    }
    .hero h1 { 
        font-size: 2em; /* Fonte ainda menor no Hero */
    }
    .cta-main {
        font-size: 1.1em; /* CTA um pouco menor */
        padding: 12px 25px;
    }
    .logo-img { height: 35px; } /* Logo um pouco menor */

    /* 3. Cards dos Sócios (Flip Card) */
    .socios-container { 
        flex-direction: column; 
        gap: 30px; 
    }
    .flip-card { 
        width: 90%; /* Largura reduzida para não tocar as bordas */
        max-width: 400px; /* Limite de largura para telas muito grandes */
        height: 350px; /* Altura reduzida para caber na tela */
        margin: 0 auto; /* Centraliza o card */
    }
    .flip-card-front h3 { font-size: 1.3em; } /* Nome menor */
    .flip-card-back p { font-size: 0.9em; } /* Texto menor no verso */

    /* 4. Diferenciais */
    .diferenciais-container { flex-direction: column; }
    .diferencial-item { 
        max-width: 100%; 
        padding: 20px; /* Padding reduzido */
    }

    /* 5. Serviços e Portfólio */
    .servicos-grid { grid-template-columns: 1fr; }
    .portfolio-grid { grid-template-columns: 1fr; }
    
    /* 6. Depoimentos */
    .depoimentos-container { flex-direction: column; }
    .depoimento-card { 
        max-width: 100%; 
        font-size: 0.9em; /* Fonte do depoimento menor */
    }
    /* Dentro de @media (max-width: 768px) {...} */

/* CORREÇÃO PARA A IMAGEM DEPOIMENTOS */
#depoimentos {
    /* Força a imagem a preencher 100% da largura e 100% da altura, 
       mesmo que distorça. O 'fixed' já está desabilitado na regra anterior. */
    background-size: 100% 100% !important; 
    background-position: top center !important;
}

/* ... (resto do código mobile) ... */

    /* 7. Rodapé */
    .footer-content { flex-direction: column; text-align: center; }
    .footer-item { margin-bottom: 20px; }
    .footer-item h4, .footer-item p { text-align: center; }
}




/* ------------------------------------------- */
/* 9. ANIMAÇÃO DE TRANSIÇÃO (SCROLL REVEAL) */
/* ------------------------------------------- */

/* Estado Inicial: Oculto e Deslocado */
.section-hidden {
    opacity: 0;
    transform: translateY(30px); /* Move 30px para baixo no início */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Transição de 0.8s */
}

/* Estado Final: Visível e na Posição Normal */
.section-visible {
    opacity: 1;
    transform: translateY(0); /* Volta à posição original */
}






  /* <div class="portfolio-item video-placeholder">
                <div class="portfolio-overlay">
                     <i class="fas fa-play-circle video-icon"></i>
                    <h4>Automação Industrial (Vídeo)</h4>
                    <p>Assista: Redução de 30% no consumo de energia na fábrica.</p>
                </div>
            </div> */