/* Configurações Globais e Variáveis de Cor */

:root {

    --primary-color: #4a7c45; /* Verde escuro do logo */

    --secondary-color: #8db942; /* Verde claro do logo */

    --accent-color: #8c6239;   /* Marrom do logo */

    --text-color: #333;

    --text-color-light: #f4f4f4;

    --bg-color: #ffffff;

    --bg-color-alt: #f9f9f9;

}



* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html {

    scroll-behavior: smooth;

}



body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    line-height: 1.6;

    color: var(--text-color);

    background-color: var(--bg-color);

}

/* Classe para páginas internas (adiciona padding p/ header fixo) */

body.internal-page,

body.detail-page { /* Aplica-se a ambas as páginas */

    padding-top: 70px;

}





.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



section {

    padding: 80px 0;

}



section:nth-child(even) {

    background-color: var(--bg-color-alt);

}



h1, h2, h3 {

    margin-bottom: 20px;

    color: var(--primary-color);

}



h2 {

    font-size: 2.5rem;

    text-align: center;

}



p {

    margin-bottom: 15px;

}



a {

    color: var(--secondary-color);

    text-decoration: none;

}



/* Header e Navegação */

header {

    background: var(--bg-color);

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    position: fixed;

    width: 100%;

    top: 0;

    z-index: 1000;

}



header .container {

    display: flex;

    justify-content: space-between;

    align-items: center; /* Mantém alinhamento vertical */

    height: 70px; /* Altura do header */

}



/* Estilos para o Logo como Imagem no Header */

.logo-link {

    display: inline-block; /* Para o link se ajustar à imagem */

    line-height: 0; /* Remove espaço extra */

}



.logo-image {

    height: 210px; /* *** SEU TAMANHO DE LOGO MANTIDO (Desktop) *** */

    width: auto; /* Mantém a proporção */

    vertical-align: middle; /* Alinha verticalmente com o menu */

}



.logo-text {

    font-size: initial;

    font-weight: normal;

    color: initial;

}



.nav-menu ul {

    display: flex;

    list-style: none;

    /* margin-right: 50px; */ /* *** MARGEM REMOVIDA *** */

}



.nav-menu li {

    margin-left: 25px;

}



.nav-menu a {

    color: var(--text-color);

    font-weight: 500;

    transition: color 0.3s ease;

}



.nav-menu a:hover {

    color: var(--primary-color);

}



/* Seção Hero (Início) - COM VÍDEO */

.hero {

    min-height: 100vh;

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding-top: 70px;

    position: relative;

    overflow: hidden;

}



#hero-video {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

    z-index: 1;

    object-fit: cover;

}



.hero-content {

    text-align: center;

    position: relative;

    z-index: 3;

    padding-bottom: 5vh;

}



.cta-button {

    background: var(--primary-color);

    color: var(--text-color-light);

    padding: 15px 30px;

    border-radius: 5px;

    font-size: 1rem;

    font-weight: bold;

    transition: background-color 0.3s ease;

}



.cta-button:hover {

    background: var(--accent-color);

}



/* Seção Sobre */

.about-content {

    max-width: 800px;

    margin: 0 auto;

    text-align: justify;

}



/* === ESTILOS PARA O TÍTULO DO "SOBRE" === */

.about-title-block {

    text-align: center;

    margin-bottom: 40px;

}

.about-pre-title {

    font-size: 1.1rem;

    color: var(--text-color);

    font-weight: 500;

    margin-bottom: 5px;

    text-transform: uppercase;

}

.about-logo-title {

    font-family: 'Georgia', 'Times New Roman', serif;

    font-size: 3.5rem;

    font-weight: bold;

    color: var(--primary-color);

    margin-bottom: 10px;

    line-height: 1.2;

}

.about-logo-title span {

    font-size: 2rem;

    vertical-align: middle;

    font-weight: normal;

}

.about-subtitle {

    font-size: 1.8rem;

    font-weight: 600;

    color: var(--text-color);

    margin-bottom: 0;

}

/* ============================================= */



/* === ESTILOS PARA A SEÇÃO "SERVICIOS" === */

#servicios {

    background-color: var(--bg-color-alt); /* Fundo cinza claro */

}



.services-intro-text {

    text-align: center;

    max-width: 700px;

    margin: 0 auto 50px auto; /* Espaço abaixo do parágrafo */

    font-size: 1.1rem;

    color: var(--text-color);

    line-height: 1.7;

}



.services-grid {

    display: grid;

    /* 2 colunas em telas grandes */

    grid-template-columns: repeat(2, 1fr); 

    gap: 40px 30px; /* Espaço vertical e horizontal */

    max-width: 900px; /* Limita a largura da grade */

    margin: 0 auto; /* Centraliza a grade */

}



.service-item {

    display: flex;

    align-items: center; /* Alinha ícone e texto */

    gap: 20px;

}



.service-icon {

    width: 70px; /* Tamanho do ícone */

    height: 70px;

    object-fit: contain;

    flex-shrink: 0; /* Impede que o ícone encolha */

}



.service-text h3 {

    font-size: 1.1rem; /* Tamanho como na imagem */

    color: var(--text-color); /* Cor de texto normal */

    font-weight: 600;

    text-transform: uppercase; /* Como na imagem */

    margin-bottom: 8px;

}



.service-text p {

    font-size: 0.95rem;

    line-height: 1.5;

    margin-bottom: 0;

    color: #555; /* Cor de texto um pouco mais clara */

}

/* ============================================= */



/* Seção Equipe */

.team-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 20px;

}



.team-member {

    background: var(--bg-color);

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 10px rgba(0,0,0,0.05);

    text-align: center;

}



.team-member h3 {

    font-size: 1.1rem;

    color: var(--text-color);

}



.team-member p {

    font-size: 0.9rem;

    color: var(--accent-color);

    margin: 0;

}





/* === ESTILOS PARA PÁGINA DE PROJETOS (CATEGORIAS) === */

.category-grid {

    display: flex; 

    flex-wrap: wrap; 

    justify-content: center; 

    gap: 20px; 

}



.category-card {

    background-color: var(--bg-color-alt); 

    border: 1px solid #ddd;

    border-radius: 8px;

    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;

    text-decoration: none; 

    text-align: center;

    flex-basis: 300px; 

    flex-grow: 1; 

    max-width: 350px; 

}



.category-card:hover {

    transform: translateY(-5px);

    background-color: var(--accent-color); 

    border-color: var(--accent-color);

}



.category-card img {

    display: none; /* Esconde a imagem de categoria */

}



.category-info {

    padding: 30px 20px; 

}



.category-info h3 {

    font-size: 1.2rem; 

    margin-bottom: 10px;

    color: var(--text-color); 

    text-transform: uppercase; 

    font-weight: 600;

}



.category-card:hover .category-info h3 {

    color: var(--text-color-light); 

}



.category-info p {

    font-size: 0.9rem; 

    color: var(--text-color);

    line-height: 1.5;

    margin-bottom: 0;

}



 .category-card:hover .category-info p {

    color: var(--text-color-light);

}





/* === ESTILOS PARA GRADE DE PROJETOS (PÁGINA PINTURA.HTML) === */

.projects-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

    gap: 30px;

    margin-bottom: 40px;

    align-content: start;

}



.project-card {

    background: var(--bg-color);

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    overflow: hidden;

    transition: transform 0.3s ease;

    width: 100%;

    display: none; /* Escondido por padrão, JS controla */

    flex-direction: column;

    min-height: 400px;

}



.project-card.visible {

    display: flex; /* JS mostra os cards da página */

}



.project-card:hover {

    transform: translateY(-5px);

}



.project-card a {

    display: block;

    line-height: 0;

}



.project-card img {

    width: 100%;

    height: 200px;

    object-fit: cover;

    display: block;

    background-color: #eee;

    cursor: pointer;

    transition: opacity 0.3s ease;

}

.project-card a:hover img {

    opacity: 0.85;

}



.project-info {

    padding: 15px;

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}



.project-info h3 {

    font-size: 1.05rem;

    margin-bottom: 10px;

    line-height: 1.3;

    color: var(--primary-color);

    flex-shrink: 0;

    text-transform: none; /* Garante que o H3 dos projetos NÃO fique maiúsculo */

}



.project-info p {

    font-size: 0.85rem;

    margin-bottom: 5px;

    color: var(--text-color);

    line-height: 1.4;

    display: block; /* Garante que o <p> apareça */

}

.project-info p strong {

    color: var(--accent-color);

}



/* Controles de Paginação (PARA PÁGINA PINTURA.HTML) */

.pagination-controls {

    text-align: center;

    margin-top: 30px;

}



.pagination-button {

    background-color: var(--primary-color);

    color: var(--text-color-light);

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

    cursor: pointer;

    font-size: 1rem;

    margin: 0 10px;

    transition: background-color 0.3s ease;

}



.pagination-button:hover:not(:disabled) {

    background-color: var(--accent-color);

}



.pagination-button:disabled {

    background-color: #ccc;

    cursor: not-allowed;

    opacity: 0.6;

}



#page-info {

    font-size: 1rem;

    font-weight: bold;

    color: var(--text-color);

    margin: 0 15px;

    display: inline-block;

    vertical-align: middle;

}





/* Seção Clientes */

.clients-list {

    columns: 2;

    -webkit-columns: 2;

    -moz-columns: 2;

    list-style: none;

    max-width: 800px;

    margin: 0 auto;

    text-align: left;

}



.clients-list li {

    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="%238db942" class="bi bi-check-lg" viewBox="0 0 16 16"><path d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"/></svg>') no-repeat left center;

    padding-left: 25px;

    margin-bottom: 10px;

    font-weight: 500;

}





/* Seção Contato */

.contact-content {

    display: flex;

    flex-wrap: wrap;

    gap: 40px;

}



.contact-info, .contact-addresses {

    flex: 1;

    min-width: 300px;

}



.contact-info p {

    font-size: 1.1rem;

    margin-bottom: 10px;

}



/* === ESTILOS ATUALIZADOS PARA OS LINKS DE ENDEREÇO === */

.contact-addresses h3 {

    margin-bottom: 25px; /* Mais espaço abaixo de "Direcciones" */

}



.address-link {

    display: block; /* Cada link em sua própria linha */

    font-size: 1.1rem;

    margin-bottom: 15px;

    color: var(--text-color); /* Cor de texto normal */

    text-decoration: none;

    position: relative; /* Para o ícone do mapa */

    padding-left: 30px; /* Espaço para o ícone */

    transition: color 0.3s ease;

}



.address-link::before {

    content: '📍'; /* Ícone de pino de mapa (emoji) */

    position: absolute;

    left: 0;

    top: 0;

    font-size: 1.2rem;

}



.address-link:hover {

    color: var(--primary-color); /* Fica verde ao passar o mouse */

    text-decoration: underline;

}

/* ================================================== */





/* Footer (Antigo - Escondido) */

footer {

    display: none; /* Esconde o footer antigo */

}



/* Menu Mobile e Responsividade */

.nav-toggle {

    display: none;

    background: transparent;

    border: none;

    cursor: pointer;

    padding: 10px;

}



.hamburger {

    display: block;

    position: relative;

    width: 25px;

    height: 3px;

    background: var(--primary-color);

    border-radius: 3px;

    transition: all 0.3s ease-in-out;

}

.hamburger::before,

.hamburger::after {

    content: '';

    position: absolute;

    width: 25px;

    height: 3px;

    background: var(--primary-color);

    border-radius: 3px;

    transition: all 0.3s ease-in-out;

}

.hamburger::before { top: -8px; }

.hamburger::after { bottom: -8px; }

.nav-open .hamburger { background: transparent; }

.nav-open .hamburger::before { transform: rotate(45deg) translate(5px, 6px); }

.nav-open .hamburger::after { transform: rotate(-45deg) translate(5px, -6px); }





/* ======================================= */

/* ===== ESTILOS PÁGINA DE DETALHES (LIGHTBOX) ===== */

/* ======================================= */



body.detail-page {

    padding-top: 70px; 

}



.project-detail-container {

    padding-top: 40px; 

    padding-bottom: 40px;

    padding-left: 20px;

    padding-right: 20px;

}



.project-detail-container h1 {

    font-size: 2.2rem;

    text-align: center;

    margin-bottom: 30px;

    line-height: 1.3;

}



/* Imagem principal (estática) */

.project-detail-container .main-image {

    width: 100%;

    max-height: 500px;

    object-fit: cover; 

    margin-bottom: 30px; 

    border-radius: 8px;

    box-shadow: 0 5px 15px rgba(0,0,0,0.1);

    background-color: #eee;

}



/* Título antes dos detalhes e descrição */

.project-detail-container h2 {

     font-size: 1.8rem;

     text-align: left;

     margin-top: 40px;

     margin-bottom: 15px;

     border-bottom: 2px solid var(--primary-color);

     padding-bottom: 5px;

}



.project-detail-container .details-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 15px 30px;

    margin-bottom: 30px;

    background-color: var(--bg-color-alt);

    padding: 20px;

    border-radius: 8px;

 }



 .project-detail-container .details-grid p {

     margin-bottom: 5px;

     font-size: 1rem;

     line-height: 1.5;

 }



 .project-detail-container .details-grid strong {

     color: var(--accent-color);

     display: block;

     margin-bottom: 2px;

 }



/* Descrição e parágrafos */

.project-detail-container h2 + p,

.project-detail-container p + p {

    font-size: 1.1rem;

    line-height: 1.7;

    margin-bottom: 15px;

    text-align: justify;

}



/* Galeria de Miniaturas (Lightbox) */

.detail-gallery {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

    gap: 15px;

    margin-bottom: 30px;

}

.detail-gallery a {

    display: block;

    border-radius: 4px;

    overflow: hidden;

    border: 2px solid #eee;

    box-shadow: 0 2px 5px rgba(0,0,0,0.1);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}

.detail-gallery img {

    width: 100%;

    height: 90px;

    object-fit: cover;

    display: block;

}

.detail-gallery a:hover {

    transform: scale(1.05);

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    border-color: var(--primary-color);

}



/* Z-index para o Lightbox (SimpleLightbox) */

.sl-overlay {

    z-index: 3000 !important;

}

.sl-wrapper {

    z-index: 3001 !important;

}



.back-link {

    display: inline-block;

    margin-top: 30px;

    color: var(--primary-color);

    text-decoration: none;

    font-weight: bold;

    border: 1px solid var(--primary-color);

    padding: 8px 15px;

    border-radius: 4px;

    transition: background-color 0.3s ease, color 0.3s ease;

}

.back-link:hover {

    background-color: var(--primary-color);

    color: var(--text-color-light);

}



/* === NOVO FOOTER (GLOBAL) === */

footer.detail-footer {

    background-color: var(--bg-color); /* Fundo branco */

    padding: 40px 0 20px 0; /* Menos padding em baixo */

    text-align: center;

    border-top: 1px solid #eee;

}

.footer-logos {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 30px;

    margin-bottom: 30px;

}

.footer-logo {

    height: 60px; /* Ajuste o tamanho */

    width: auto;

    opacity: 0.7;

}

.footer-logo-text {

    height: 100px; /* *** TAMANHO AUMENTADO (Desktop) *** */

    width: auto;

    opacity: 0.7;

}

.social-icons {

    display: flex;

    justify-content: center;

    gap: 20px;

}

.social-icons img {

    height: 35px; /* Tamanho dos ícones */

    width: 35px;

    transition: transform 0.3s ease;

}

.social-icons a:hover img {

    transform: scale(1.1);

}

.copyright-bar {

    background-color: #333; /* Barra escura no fundo */

    color: #aaa;

    text-align: center;

    padding: 15px 0;

    font-size: 0.9rem;

}

.copyright-bar p {

    margin: 0;

}

/* Oculta o footer principal (o antigo) caso exista */

footer {

    display: none;

}

/* Mostra o novo footer em todas as páginas */

footer.detail-footer,

.copyright-bar {

    display: block;

}





/* Ajustes de Responsividade */

@media (max-width: 768px) {

    .nav-menu {

        display: none;

        position: absolute;

        top: 70px;

        left: 0;

        right: 0;

        background: var(--bg-color);

        box-shadow: 0 5px 10px rgba(0,0,0,0.1);

    }



    .nav-menu.nav-open {

        display: block;

    }



    .nav-menu ul {

        flex-direction: column;

        margin-right: 0; 

    }



    .nav-menu li {

        margin: 0; 

    }



    .nav-menu a {

        display: block;

        padding: 15px 20px;

        text-align: center;

        border-bottom: 1px solid var(--bg-color-alt);

    }



    .nav-toggle {

        display: block;

    }



    h2 {

        font-size: 2rem;

    }

    

    /* >>> INÍCIO DAS CORREÇÕES PONTUAIS DE RESPONSIVIDADE (APLICADAS) <<< */

    

    /* 1. CORREÇÃO DO LOGO NO CABEÇALHO (TAMANHO VISÍVEL: 60px) */

    .logo-image {

        /* Aumentado para ter um tamanho adequado no celular */

        height: 60px !important; 

    }

    

    /* 2. CORREÇÃO DA SEÇÃO HERO (TAMANHO AJUSTADO: 45vh) */

    .hero {

        /* Reduzido para 45% da altura da tela, permitindo que o conteúdo seguinte seja visto */

        min-height: 45vh !important; 

        align-items: center; 

    }

    

    /* 3. CORREÇÃO DO LOGO DE TEXTO NO RODAPÉ (REDUÇÃO PARA MOBILE) */

    .footer-logo-text {

        /* Reduzido para telas pequenas */

        height: 30px; 

    }

    

    /* >>> FIM DAS CORREÇÕES PONTUAIS DE RESPONSIVIDADE <<< */

    

    /* Categoria e Grade de Projeto */

    .category-grid,

    .projects-grid {

        grid-template-columns: 1fr;

    }



     .project-card {

        min-height: auto;

    }

    

    /* Grade de Serviços */

    .services-grid {

        grid-template-columns: 1fr; /* 1 coluna em telas pequenas */

    }

    .service-item {

        flex-direction: column; /* Ícone em cima do texto */

        text-align: center;

    }



    .clients-list {

        columns: 1;

        -webkit-columns: 1;

        -moz-columns: 1;

    }



    .contact-content {

        flex-direction: column;

    }

    

    .pagination-button {

        padding: 8px 15px;

        font-size: 0.9rem;

        margin: 0 5px;

    }

    #page-info {

        font-size: 0.9rem;

        margin: 0 10px;

    }

    

    /* Página de Detalhes Responsiva */

    body.detail-page {

        padding-top: 70px; 

    }

    .project-detail-container h1 {

        font-size: 1.8rem;

    }

     .project-detail-container h2 {

        font-size: 1.5rem;

    }

    .project-detail-container .details-grid {

        grid-template-columns: 1fr;

    }

    .project-detail-container h2 + p,

    .project-detail-container p + p {

        font-size: 1rem;

        text-align: left;

    }

    

    .detail-gallery {

        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));

        gap: 8px;

    }

    .detail-gallery img {

        height: 70px;

    }



    /* Footer de Detalhes Responsivo */

    .footer-logos {

        flex-direction: column;

        gap: 20px;

    }

    .footer-logo {

        height: 50px;

    }

    

    .social-icons img {

        height: 30px;

        width: 30px;

    }

}