/* Import all CSS files */
@import url('variables.css');
@import url('reset.css');
@import url('header.css');
@import url('hero.css');
@import url('about.css');
@import url('projects.css');
@import url('brands.css'); 
@import url('testimonials.css');
@import url('testimonials-3d.css');
@import url('blog.css');
@import url('footer.css');
@import url('whatsapp.css');
@import url('style_pages.css');
@import url('animations.css');
@import url('mercadolivre.css');
@import url('quem-somos.css');

/* ==========================================================================
   ESTILOS GLOBAIS E HELPERS
   ========================================================================== */

.section {
    padding: 100px 0;
    position: relative;
}

/* Adiciona mais espaço vertical entre as seções no mobile para melhor legibilidade */
@media (max-width: 768px) {
    .section {
        padding: 60px 0; /* Aumenta o espaçamento vertical padrão para telas menores */
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ==========================================================================
   AJUSTES GERAIS E CORREÇÕES
   ========================================================================== */

/* CORREÇÃO DE RESPONSIVIDADE */
/* Garante que o container do carrossel de depoimentos contenha seus botões */
.testimonials-carousel-container {
    position: relative;
    overflow: hidden; /* Ajuda a conter elementos posicionados absolutamente */
}

/* Evita a barra de rolagem horizontal causada por animações de entrada */
body {
    overflow-x: hidden;
    background-color: var(--background-white); /* Garante um fundo padrão */
}

/* AJUSTES DOS BOTÕES DO CARROSSEL (ambientes.html) */
/* Move os botões para mais dentro da imagem */
.projects-section .carousel-nav.prev {
    left: 2rem;
}
.projects-section .carousel-nav.next {
    right: 2rem;
}

/* Estilo para cards clicáveis do blog */
.blog-card-clickable {
    cursor: pointer;
    position: relative;
}

/* Estilos para o formulário de contato */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    align-self: flex-start;
}

/* Nova seção de informações de contato (contato.html) */
.contact-info-list,
.marcas-carousel { /* Adicionada a classe do HTML aqui */
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas no desktop */
    gap: 2rem;
    text-align: center;
    margin-top: 0;
}

.contact-info-item,
.marca-item { /* Adicionada a classe do HTML aqui */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 1rem;
}

.contact-info-item i,
.marca-item i { /* Adicionada a classe do HTML aqui */
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

.contact-info-item p,
.marca-item p { /* Adicionada a classe do HTML aqui */
    font-size: 1rem;
    color: var(--text-light);
    line-height: 1.6;
}


@media (max-width: 768px) {

    /* Organiza o formulário e o mapa em uma coluna */
    body.contato-page .about-content {
        flex-direction: column-reverse; /* Coloca o formulário antes do mapa */
        gap: 2rem;
    }

    /* Faz os campos do formulário ficarem em coluna */
    body.contato-page .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    /* Layout da lista de contatos para mobile */
    .contact-info-list,
    .marcas-carousel { /* Adicionada a classe do HTML aqui */
        grid-template-columns: 1fr; /* 1 coluna no mobile */
        gap: 2.5rem; /* Espaçamento vertical entre os itens */
    }

    .contact-info-item,
    .marca-item { /* Adicionada a classe do HTML aqui */
        flex-direction: column; /* Ícone e texto um em cima do outro */
        text-align: center; /* Centraliza o texto */
        align-items: center;
        justify-content: flex-start; /* Mantém o alinhamento no topo do card */
    }
}

/* Correção para Carrossel de Marcas e Depoimentos em Telas Menores */
@media (max-width: 768px) {
    .marcas-scrolling-container, .testimonials-carousel-container {
        overflow-x: auto; /* Permite rolagem horizontal se o conteúdo transbordar */
        -webkit-overflow-scrolling: touch; /* Melhora a experiência de rolagem no iOS */
    }

    /* Garante que o carrossel de marcas na home tenha largura para rolar */
    .marcas-scrolling-container .marcas-track {
        width: max-content;
    }
}