/* Resets e Cores */
:root {
    --azul-escuro: #003366; /* Base do Logo */
    --ciano: #00AEEF;       /* Acento do Logo */
    --cinza-claro: #f4f7f9;
    --branco: #ffffff;
    --texto: #333;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Open Sans', sans-serif; color: var(--texto); line-height: 1.6; scroll-behavior: smooth; }

.container { width: 90%; max-width: 1200px; margin: auto; }

/* Navbar */
/* Navbar com altura fixa para evitar "pulo" entre páginas */
.navbar { 
    background: var(--branco); 
    height: 80px; /* Altura fixa definida */
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
}

.navbar .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%; /* Garante que ocupe todo o espaço */
}

/* Fixando a altura da logo para ser idêntica em todas as páginas */
.logo { 
    height: 55px; 
    width: auto; 
    display: block; /* Remove espaços vazios abaixo da imagem */
}

/* Ajuste fino nos links para alinhar ao centro da altura fixa */
.nav-links { 
    display: flex; 
    list-style: none; 
    align-items: center; 
}
.nav-links li { margin-left: 25px; }
.nav-links a { text-decoration: none; color: var(--azul-escuro); font-weight: 600; font-size: 14px; transition: 0.3s; }
.nav-links a:hover { color: var(--ciano); }
.btn-contato { background: var(--ciano); color: #fff !important; padding: 10px 20px; border-radius: 5px; }

/* Hero Section */
.hero { background: linear-gradient(rgba(0,51,102,0.8), rgba(0,51,102,0.8)), url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?auto=format&fit=crop&w=1350&q=80'); background-size: cover; color: var(--branco); padding: 100px 0; text-align: center; }
.hero h1 { font-family: 'Montserrat', sans-serif; font-size: 3rem; margin-bottom: 20px; }
.hero h1 span { color: var(--ciano); }
.cta-button { background: var(--ciano); color: white; padding: 15px 35px; border: none; border-radius: 5px; cursor: pointer; text-decoration: none; display: inline-block; font-weight: bold; transition: 0.3s; }
.cta-button:hover { background: #008cc0; transform: translateY(-3px); }

/* Institucional */
.institucional { padding: 80px 0; background: var(--cinza-claro); text-align: center; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.card { background: white; padding: 40px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-top: 5px solid var(--ciano); }
.valores { margin-top: 50px; font-weight: bold; color: var(--azul-escuro); font-size: 1.2rem; }

/* Produtos */
.produtos { padding: 80px 0; }
.section-title { text-align: center; margin-bottom: 40px; color: var(--azul-escuro); }
.grid-produtos { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.prod-item { background: var(--azul-escuro); color: white; padding: 30px; border-radius: 8px; text-align: center; transition: 0.3s; }
.prod-item:hover { background: var(--ciano); }

/* Form */
.contato { padding: 80px 0; background: var(--azul-escuro); color: white; text-align: center; }
.form-b2b { max-width: 600px; margin: 40px auto; display: flex; flex-direction: column; gap: 15px; }
.form-b2b input, .form-b2b select { padding: 12px; border-radius: 5px; border: none; }

/* Responsividade (Mobile) */
@media (max-width: 768px) {
    .navbar .container { flex-direction: column; }
    .nav-links { margin-top: 20px; flex-wrap: wrap; justify-content: center; }
    .nav-links li { margin: 10px; }
    .hero h1 { font-size: 2rem; }
}

/* Estilização Avançada do Rodapé */
footer {
    background: #001a33; /* Azul mais profundo para contraste */
    color: white;
    padding: 60px 0 20px 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-box h4 {
    color: var(--ciano);
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 16px;
    letter-spacing: 1px;
}

.footer-box p {
    font-size: 14px;
    margin-bottom: 10px;
    opacity: 0.9;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-box i {
    color: var(--ciano);
    width: 20px;
}

/* Redes Sociais */
.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    color: white;
    background: rgba(255,255,255,0.1);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    text-decoration: none;
    font-size: 18px;
}

.social-links a:hover {
    background: var(--ciano);
    transform: translateY(-5px);
}

/* Faixa Final */
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 20px;
    text-align: center;
    font-size: 13px;
}

/* Ajuste Mobile */
@media (max-width: 768px) {
    .footer-grid {
        text-align: center;
    }
    .footer-box p {
        justify-content: center;
    }
    .social-links {
        justify-content: center;
    }
}

/* Estilos do Blog */
.blog-header {
    background: var(--azul-escuro);
    color: white;
    padding: 60px 0;
    text-align: center;
}

.grid-blog {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: 40px 0;
}

.blog-card {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    border: 1px solid #eee;
}

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

.blog-img {
    height: 200px;
    background-size: cover;
    background-position: center;
}

.blog-content {
    padding: 25px;
}

.blog-content .category {
    color: var(--ciano);
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}

.blog-content h3 {
    margin: 15px 0;
    color: var(--azul-escuro);
    font-family: 'Montserrat', sans-serif;
}

.blog-content p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.read-more {
    text-decoration: none;
    color: var(--azul-escuro);
    font-weight: bold;
    font-size: 14px;
}

.blog-card.placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--cinza-claro);
    border: 2px dashed #ccc;
}

/* Ajuste no Menu Ativo */
.nav-links a.active {
    color: var(--ciano);
    border-bottom: 2px solid var(--ciano);
}

/* Formatação da Matéria de Blog */
.post-full { padding: 60px 0; background: #fff; }
.post-header { text-align: center; margin-bottom: 40px; }
.post-header h1 { font-size: 2.5rem; color: var(--azul-escuro); margin: 10px 0; }
.post-header .meta { color: #888; font-size: 0.9rem; }
.post-hero-img { width: 100%; height: 400px; object-fit: cover; border-radius: 15px; margin-bottom: 40px; }
.post-text { max-width: 800px; margin: 0 auto; font-size: 1.1rem; line-height: 1.8; color: #444; }
.post-text p { margin-bottom: 20px; }
.post-text blockquote { border-left: 5px solid var(--ciano); padding-left: 20px; font-style: italic; font-size: 1.3rem; color: var(--azul-escuro); margin: 30px 0; }

@media (max-width: 768px) {
    .post-header h1 { font-size: 1.8rem; }
    .post-hero-img { height: 250px; }
}

/* Esconder o botão de menu por padrão (computador) */
.menu-toggle {
    display: none;
    font-size: 24px;
    color: var(--azul-escuro);
    cursor: pointer;
}

/* Regras para Celular (Media Query) */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* Aparece os 3 risquinhos */
    }

    .nav-links {
        display: none; /* Esconde o menu lateralmente */
        flex-direction: column;
        width: 100%;
        background: var(--branco);
        position: absolute;
        top: 80px; /* Logo abaixo do header */
        left: 0;
        padding: 20px;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    /* Classe que o JavaScript vai ativar */
    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 15px 0;
        text-align: center;
    }
}

/* --- Novos Estilos para a Seção de Produtos --- */

.produtos {
    padding: 80px 0;
    background: var(--branco);
}

/* Garante que o grid de texto mantenha o respiro correto */
.grid-produtos {
    margin-bottom: 60px; /* Espaço entre o texto e as imagens */
}

/* Container da vitrine visual */
.produtos-visual {
    text-align: center;
    border-top: 1px solid #eee; /* Linha sutil de separação */
    padding-top: 60px;
}

.subsection-title {
    color: var(--azul-escuro);
    font-family: 'Montserrat', sans-serif;
    margin-bottom: 15px;
    font-size: 1.8rem;
}

.subsection-text {
    max-width: 600px;
    margin: 0 auto 40px auto;
    color: #666;
}

/* Grid para as imagens ficarem lado a lado */
.grid-imagens-produtos {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Duas colunas iguais */
    gap: 40px;
    max-width: 900px; /* Limita a largura para não espalhar muito */
    margin: 0 auto;
    align-items: center; /* Alinha verticalmente se houver diferença de altura */
}

/* Container individual da imagem */
.produto-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.produto-img-box:hover {
    transform: scale(1.03); /* Efeito sutil de zoom ao passar o mouse */
}

/* A Mágica da Simetria e Responsividade */
.img-produto {
    max-width: 100%; /* Não deixa a imagem ser maior que o container */
    height: auto;    /* Mantém a proporção */
    max-height: 400px; /* Define uma altura máxima para garantir a simetria */
    object-fit: contain; /* Garante que a imagem caiba sem distorcer */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1)); /* Sombra suave profissional */
}

/* Legenda abaixo da imagem */
.img-caption {
    margin-top: 20px;
    font-weight: bold;
    color: var(--azul-escuro);
    font-size: 1.2rem;
    font-family: 'Montserrat', sans-serif;
}

/* --- Responsividade para Celular --- */
@media (max-width: 768px) {
    .grid-imagens-produtos {
        grid-template-columns: 1fr; /* No celular, as imagens ficam uma abaixo da outra */
        gap: 30px;
    }
    
    .img-produto {
        max-height: 300px; /* Altura menor no mobile */
    }
    
    .subsection-title {
        font-size: 1.5rem;
    }
}