/* ===========================
   BASE E ESTRUTURA
=========================== */
.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ===========================
   LAYOUT RESPONSIVO - BREAKPOINTS
=========================== */

/* 1400px */
@media (max-width: 1400px) {
    .container { width: min(94%, 1200px); }
    .hero-content h1 { font-size: 68px; }
    .section-header h2, .about-content h2 { font-size: 56px; }
    .cta-box h2 { font-size: 58px; }
}

/* 1200px */
@media (max-width: 1200px){
    .about-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .about-images {
        display: flex; /* Mantém as imagens visíveis */
        flex-direction: column; /* Coloca uma embaixo da outra */
        gap: 15px;
    }

    .image-large, .image-small {
        width: 100%; /* Garante que ambas ocupem a largura total */
    }
}

/* 900px */
@media (max-width: 900px) {
    .hero { min-height: 90vh; }
    .hero-content { text-align: center; margin: auto; }
    .hero-content h1 { font-size: 54px; }
    .about-content { text-align: center; }
    .about-content h2 { font-size: 48px; }
    .footer-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-grid, .produto-grid { grid-template-columns: 1fr; }
}

/* 768px - AJUSTES PARA O SEU PEDIDO (MENU E IMAGENS) */
@media (max-width: 768px) {
    /* 1. Header: Logo em cima, links embaixo */
    .nav-container {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    /* Garante que o menu apareça e fique em coluna */
    #navbar { display: block !important; width: 100%; }
    #navbar ul {
        display: flex;
        justify-content: center;
        gap: 15px;
        flex-wrap: wrap; /* Caso os links sejam muitos, quebram linha */
        padding: 0;
    }

    /* 2. Corrige bug das imagens da história */
    .about-grid { display: flex; flex-direction: column; }
    .about-images { display: flex; flex-direction: column; gap: 15px; }
    .about-image img { width: 100%; height: auto; }

    /* Outros ajustes de tamanho */
    .hero h1 { font-size: 42px; }
    .product-grid { grid-template-columns: 1fr; }
}

/* 580px */
@media (max-width: 580px) {
    section { padding: 80px 0; }
    .header-btn { display: none; }
    .hero-buttons { flex-direction: column; }
    .btn-gold { width: 100%; }
    .stats-grid, .feature-card { grid-template-columns: 1fr; flex-direction: column; }
    .footer { text-align: center; }
    .floating-whatsapp { width: 60px; height: 60px; font-size: 28px; }
}

/* ===========================
   TIPOGRAFIA FLUIDA
=========================== */
.hero-content h1 { font-size: clamp(38px, 8vw, 82px); }
.section-header h2 { font-size: clamp(32px, 6vw, 62px); }
.about-content h2 { font-size: clamp(32px, 6vw, 64px); }
.cta-box h2 { font-size: clamp(32px, 6vw, 68px); }
/* Ajustes para telas menores (580px) */
@media (max-width: 580px) {
    /* Faz o botão de orçamento reaparecer */
    .header-btn {
        display: block !important; 
        font-size: 14px; /* Ajuste o tamanho se ficar muito grande */
        padding: 8px 12px;
    }

    /* Coloca a galeria em uma coluna só (empilhada) */
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
}/* Ajustes para telas menores (580px) */
@media (max-width: 580px) {
    /* Faz o botão de orçamento reaparecer */
    .header-btn {
        display: block !important; 
        font-size: 14px; /* Ajuste o tamanho se ficar muito grande */
        padding: 8px 12px;
    }

    /* Coloca a galeria em uma coluna só (empilhada) */
    .gallery-grid {
        grid-template-columns: 1fr !important;
    }
}/* Ajustes para as avaliações no celular */
@media (max-width: 768px) {
    /* Garante que as avaliações fiquem uma embaixo da outra */
    .testimonial-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 20px; /* Espaçamento entre os cards */
    }

    /* Diminui o tamanho do texto da avaliação */
    .testimonial-card p {
        font-size: 14px; /* Ajuste para o tamanho que preferir (ex: 13px, 14px) */
        line-height: 1.5;
    }
    
    /* Opcional: Ajusta o nome do cliente */
    .testimonial-card strong {
        font-size: 16px;
    }
}/* Ajuste para as imagens da seção "Sobre Nós" no celular */
@media (max-width: 768px) {
    .about-images {
        display: flex;
        flex-direction: column; /* Empilha as imagens verticalmente */
        gap: 15px; /* Adiciona um espaço entre elas */
        width: 100%;
    }

    .about-image img {
        width: 100%; /* Força a imagem a ocupar 100% da largura disponível */
        height: auto; /* Mantém a proporção da imagem para não distorcer */
        object-fit: cover; /* Garante que a imagem preencha o espaço sem deformar */
    }
}