/*===================================================================
  VARIÁVEIS DE CORES (Tema Único: CLARO/PADRÃO)
===================================================================*/
:root {
    --cor-primaria: #FFC72C;       /* Amarelo Reobote (Destaque) */
    --cor-secundaria: #1A1A1A;       /* Preto Reobote (Texto/Fundos Escuros) */
    --cor-fundo-claro: #FFFFFF;     /* Branco */
    --cor-fundo-escuro: #1A1A1A;    /* Preto Sólido (para fundos de seção escura, como o mapa) */
    --cor-texto-principal: #1A1A1A; /* Texto principal preto */
    --cor-texto-claro: #FFFFFF;     /* Texto claro branco */
    --cor-cinza-suave: #757575;
    --cor-cinza-clara: #F8F8F8;     /* Fundo suave para cards e seções leves */
    --font-principal: 'Poppins', sans-serif;
}

/*===================================================================
  ESTILO DE FOCO (ACESSIBILIDADE)
===================================================================*/
:focus {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 3px; 
    border-radius: 5px; 
}

/*===================================================================
  RESET e BASE
===================================================================*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-principal);
    line-height: 1.6;
    color: var(--cor-texto-principal);
    background-color: var(--cor-fundo-claro);
}

a {
    text-decoration: none;
    color: var(--cor-texto-principal);
    transition: color 0.3s ease;
}

img {
    max-width: 100%;
    height: auto;
}

/* Utilitários */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.section {
    padding: 80px 0;
}

.bg-light {
    background-color: var(--cor-cinza-clara);
}

/* Mantido para seções que usam fundo preto (como o mapa e footer) */
.bg-dark {
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-texto-claro);
}

.bg-dark a {
    color: var(--cor-primaria);
}

/* Títulos de Seção */
.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    color: var(--cor-texto-principal);
}

.section-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--cor-primaria);
    margin: 10px auto 0;
    border-radius: 2px;
}

.section-title-light {
    color: var(--cor-texto-claro);
    font-size: 2.5rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}

.section-title-light::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background-color: var(--cor-primaria);
    margin: 10px auto 0;
    border-radius: 2px;
}

/*===================================================================
  BOTÕES (CTAs)
===================================================================*/
.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border-color: var(--cor-primaria);
}

.btn-primary:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}

.btn-secondary {
    background-color: transparent;
    color: var(--cor-secundaria);
    border-color: var(--cor-secundaria);
}

.btn-secondary:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border-color: var(--cor-primaria);
}

.btn-secondary-outline {
    background-color: transparent;
    color: var(--cor-texto-claro);
    border-color: var(--cor-texto-claro);
    padding: 8px 20px;
    font-size: 0.9rem;
}

.btn-secondary-outline:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border-color: var(--cor-primaria);
}

/*===================================================================
  CABEÇALHO (HEADER) - Tema CLARO apenas
===================================================================*/
.header {
    background-color: #FFFFFF; 
    padding: 15px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilo da Logo em Imagem */
.logo-img {
    max-height: 60px; 
    width: auto;
    display: block;
}

/* Restante dos estilos do Cabeçalho */
.logo {
    display: flex;
    flex-direction: column;
    line-height: 1;
}

.logo-reobote {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-secundaria);
}

.accent-color-reobote {
    color: var(--cor-primaria);
}

.tagline {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--cor-cinza-suave);
    letter-spacing: 1px;
}

.nav-list {
    list-style: none;
    display: flex;
}

.nav-list li {
    margin-left: 30px;
}

/* Aprimoramento 1: Efeito "Zoom Suave" na Navegação */
.nav-list a {
    font-weight: 600;
    padding: 5px 0;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease; 
    display: inline-block; 
}

.nav-list a:hover {
    color: var(--cor-primaria);
    transform: translateY(-2px); 
}

.nav-list a.active::after,
.nav-list a:hover::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--cor-primaria);
    transform: scaleX(1);
    transition: transform 0.3s ease;
}

.nav-list a:not(.active)::after {
    transform: scaleX(0);
}

.btn-nav {
    margin-left: 20px;
    padding: 8px 20px;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria) !important;
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-nav:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-primaria) !important;
}

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--cor-secundaria);
}

/*===================================================================
  SE��O HERO - NOVO ESTILO PROFISSIONAL COM IMAGEM DE FUNDO
===================================================================*/
.hero {
    /* Define o tamanho da tela para ser visualmente impactante */
    height: 100vh; /* Altura total da viewport (tela cheia) */
    min-height: 650px; /* Garante altura m�nima em telas muito grandes */
    width: 100%;
    
    /* Configura��o da Imagem de Fundo */
    background: url('../images/topo/inicio.png') center center / cover no-repeat;
    
    /* Configura��o Flexbox para centralizar o conte�do vertical e horizontalmente */
    display: flex;
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    
    position: relative;
    text-align: center;
    overflow: hidden; /* Importante para o v�deo/imagem de fundo */
}

/* Overlay Escuro para Legibilidade */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Cor escura transparente para fazer o texto branco "saltar" */
    background-color: rgba(0, 0, 0, 0.6); 
    z-index: 1; /* Deve estar abaixo do conte�do (z-index 2) */
}

/* Conte�do (T�tulo, Par�grafo, Bot�o) */
.hero-content {
    position: relative;
    z-index: 2; /* Acima do overlay */
    color: var(--cor-texto-claro); /* Texto branco */
    max-width: 900px; /* Limita a largura do texto para melhor leitura */
    padding: 0 15px;
}

.hero h1 {
    font-size: 4.5rem; /* T�tulo bem grande e de alto impacto */
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 25px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4); /* Sombra suave para destaque */
}

/* Destaque no T�tulo */
.hero h1 .text-highlight {
    color: var(--cor-primaria); /* Usa o amarelo Reobote para destaque visual */
}

.hero p {
    font-size: 1.5rem; /* Subt�tulo grande e leg�vel */
    font-weight: 300;
    margin-bottom: 40px;
    line-height: 1.5;
}

/* Bot�o do Hero - Estilo de Destaque */
.btn-hero-large {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    /* Usa a cor prim�ria para o bot�o principal do Hero */
    background-color: var(--cor-primaria); 
    color: var(--cor-secundaria); 
    border: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-hero-large:hover {
    background-color: #f7d242; /* Amarelo um pouco mais claro */
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}


/* Responsividade do Hero */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 3.5rem;
    }
    .hero p {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .hero {
        height: auto; /* Permite que a altura se ajuste em mobile */
        min-height: 500px;
        padding: 100px 0; /* Adiciona padding para dar espa�o */
    }
    
    .hero h1 {
        font-size: 2.5rem; /* Reduz drasticamente em mobile */
        margin-bottom: 15px;
    }
    
    .hero p {
        font-size: 1.1rem;
        margin-bottom: 30px;
    }
    
    .btn-hero-large {
        padding: 12px 25px;
        font-size: 1rem;
    }
}

/*===================================================================
  SEÇÃO SOBRE NÓS
===================================================================*/
.sobre-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 50px;
    align-items: center;
}

.sobre-text p {
    margin-bottom: 20px;
    color: var(--cor-cinza-suave);
}

.sobre-icon-box {
    text-align: center;
    padding: 30px;
    border: 1px solid var(--cor-cinza-clara);
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.sobre-icon-box h3 {
    margin-top: 15px;
    color: var(--cor-secundaria);
}

.icon-accent {
    color: var(--cor-primaria);
}

/* Estilos para Cards e Inputs (Tema Único) */
.servico-card,
.sobre-icon-box {
    background-color: var(--cor-fundo-claro); /* Usa o branco/fundo claro */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--cor-cinza-clara);
}

.contact-form input,
.contact-form textarea {
    /* Mantém os inputs limpos para o tema claro */
    background-color: #FFFFFF;
    color: var(--cor-texto-principal);
    border: 1px solid #ccc;
}

/*===================================================================
  SEÇÃO SERVIÇOS - V2 (Layout Mais Atrativo)
===================================================================*/
.servicos .subtitle {
    text-align: center;
    margin-top: -30px; 
    margin-bottom: 50px;
    font-size: 1.1rem;
    color: var(--cor-cinza-suave);
}

.servicos-grid-v2 {
    display: grid;
    /* NOVO: Define 3 colunas de largura igual para desktop */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px;
    align-items: stretch;
}

/* Estilo do Card V2 */
.servico-card-v2 {
    background-color: var(--cor-fundo-claro);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-top 0.3s ease;
    border: 1px solid var(--cor-cinza-clara);
    border-top: 4px solid var(--cor-cinza-clara); 
    display: flex; /* Para flexionar o conteúdo verticalmente */
    flex-direction: column;
}

.servico-card-v2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-top: 4px solid var(--cor-primaria); 
}

.servico-card-v2 i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--cor-primaria);
    align-self: flex-start; /* Alinha o ícone no início */
}

.servico-card-v2 h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--cor-secundaria);
}

.servico-card-v2 p {
    color: var(--cor-cinza-suave);
    margin-bottom: 20px;
    flex-grow: 1; /* Permite que o parágrafo ocupe o espaço restante */
}

.servico-details {
    list-style: none;
    padding-left: 0;
}

.servico-details li {
    font-size: 0.9rem;
    margin-bottom: 5px;
    color: var(--cor-secundaria);
    line-height: 1.4;
}

/* Card que ocupa a largura total */
.servico-card-full {
    grid-column: 1 / -1; /* Ocupa todas as 3 colunas */
    background-color: var(--cor-secundaria); 
    color: var(--cor-texto-claro);
    padding: 30px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.servico-card-full:hover {
    transform: translateY(-5px);
}

.servico-card-full i {
    color: var(--cor-primaria);
    font-size: 3rem;
    margin-bottom: 10px;
}

.servico-card-full h3 {
    color: var(--cor-primaria);
    font-size: 1.8rem;
    margin-bottom: 10px;
}

.servico-card-full p {
    max-width: 800px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.8);
}

/* Card de serviços especiais */
.servico-card-mobile {
    /* Ocupa 1 coluna */
    grid-column: span 1; 
    background-color: var(--cor-fundo-claro);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--cor-cinza-clara);
}

.servico-card-mobile h4 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
    margin-bottom: 15px;
    border-bottom: 2px solid var(--cor-primaria);
    display: inline-block;
    padding-bottom: 5px;
}

.servico-card-mobile .special-list li {
    padding-left: 25px;
    position: relative;
    font-size: 1rem;
    margin-bottom: 10px;
    color: var(--cor-cinza-suave); /* Corrigi a cor para cinza suave */
}

.servico-card-mobile .special-list li i {
    position: absolute;
    left: 0;
    top: 3px;
    color: var(--cor-primaria);
    font-size: 1.1rem;
}

/* NOVO: Contêiner da imagem extra */
.servicos-imagem-extra {
    grid-column: span 1; /* Ocupa 1 coluna ao lado do servico-card-mobile */
    display: flex; /* Para centralizar a imagem */
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Garante que a imagem não transborde */
    border-radius: 8px; /* Borda arredondada para a imagem */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* Sombra para o contêiner */
}

.servicos-imagem-extra img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
    display: block;
    border-radius: 8px;
}


/*===================================================================
  MEDIA QUERIES (Responsividade)
===================================================================*/

@media (max-width: 992px) { /* Ajustei para um breakpoint mais comum para tablets */
    .servicos-grid-v2 {
        /* Muda para 2 colunas em tablets */
        grid-template-columns: repeat(2, 1fr); 
    }
    
    .servico-card-full {
        grid-column: 1 / -1; /* Continua ocupando a largura total (2 colunas) */
    }

    .servico-card-mobile {
        grid-column: span 1; /* Ocupa 1 coluna */
    }

    .servicos-imagem-extra {
        grid-column: span 1; /* Ocupa 1 coluna ao lado do card-mobile */
        min-height: 200px; /* Altura mínima para a imagem em tablets */
    }
}

@media (max-width: 768px) { /* Para telas menores, como smartphones */
    .servicos-grid-v2 {
        grid-template-columns: 1fr; /* Volta para 1 coluna */
    }
    
    .servico-card-mobile,
    .servicos-imagem-extra,
    .servico-card-full {
        grid-column: auto; /* Todos os itens ocupam a largura total */
    }

    .servicos-imagem-extra {
        height: 250px; /* Altura fixa para a imagem em mobile */
    }
}

/*===================================================================
  MEDIA QUERIES (Responsividade)
===================================================================*/

@media (max-width: 900px) {
    /* Garante que todos os cards v2 ocupem a largura total em telas menores */
    .servicos-grid-v2 {
        grid-template-columns: 1fr;
    }
    
    .servico-card-mobile,
    .servico-card-full {
        /* Remove a regra de grid-column para ocupar 100% em mobile */
        grid-column: auto; 
    }
    
    .servico-card-full {
        text-align: left;
    }
    .servico-card-full p {
        margin: 0;
    }
    
    /* ... (código) ... */
}

/* Removemos as regras antigas que não são mais usadas:
.servicos-grid 
.servico-card 
*/
/*===================================================================
  SE��O PORTF�LIO - NOVO LAYOUT DIN�MICO
===================================================================*/
.portfolio {
    background-color: var(--cor-fundo-claro); /* Fundo claro */
}

/* Estilos para o Filtro (Bot�es) */
.portfolio-filter {
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Garante que os bot�es quebrem em mobile */
    gap: 15px;
}

.portfolio-filter .filter-btn {
    background-color: var(--cor-cinza-clara);
    color: var(--cor-secundaria);
    padding: 10px 20px;
    border: none;
    border-radius: 50px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.portfolio-filter .filter-btn:hover,
.portfolio-filter .filter-btn.active {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

/* Grid de Projetos */
.portfolio-grid {
    display: grid;
    /* Layout responsivo: M�nimo de 300px por coluna, ajuste autom�tico */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* Item Individual do Portf�lio */
.portfolio-item {
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Garante que a imagem cubra o container */
    display: block;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05); /* Efeito de zoom sutil no hover */
}

/* Overlay (Informa��es sobre a Imagem) */
.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 26, 0.85); /* Fundo escuro transparente */
    color: var(--cor-texto-claro);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    
    /* Efeito de Transi��o (Inicia semi-invis�vel) */
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s ease;
}

.portfolio-item:hover .item-overlay {
    opacity: 1;
    transform: translateY(0);
}

.item-overlay h3 {
    font-size: 1.5rem;
    color: var(--cor-primaria);
    margin-bottom: 10px;
}

.item-overlay p {
    margin-bottom: 20px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
}
/*===================================================================
  SE��O LOCALIDADES (MAPA) - Ajustes de Tipografia e Layout
===================================================================*/
.localidades {
    background-color: var(--cor-fundo-escuro); /* #1A1A1A */
    color: var(--cor-texto-claro); /* #FFFFFF */
}

.map-section-content {
    /* Layout: Texto � esquerda e Mapa � direita */
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px; /* Espa�o entre texto e mapa */
}

/* Cont�iner de Texto (Lado Esquerdo) */
.map-text-content {
    flex: 1; /* Permite que ocupe metade do espa�o */
    max-width: 550px; /* Limita a largura para que o texto fique em bloco */
}

/* ?? AJUSTE DE TIPOGRAFIA: Texto de Destaque (SERVI�OS REALIZADOS) */
.eyebrow-text {
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cor-primaria); /* Amarelo */
    margin-bottom: 15px; /* Aumenta o espa�amento */
    letter-spacing: 1px;
}

/* ?? AJUSTE DE TIPOGRAFIA: T�tulo Principal Grande */
.map-text-content h2 {
    /* Estilo para T�tulos em Destaque (muito grande e bold) */
    font-size: 3.2rem; 
    font-weight: 700;
    line-height: 1.25; /* Espa�amento entre linhas ajustado */
    margin-bottom: 30px;
    color: var(--cor-texto-claro);
    text-align: left; /* Garante que o texto esteja alinhado � esquerda */
    /* Remove a linha padr�o do section-title-light, se ela estiver sendo aplicada */
}

/* NOVO: Linha de destaque para o texto (conforme a imagem de refer�ncia) */
.map-text-content .title-underline {
    width: 60px;
    height: 4px;
    background-color: var(--cor-primaria);
    margin-top: 10px;
    border-radius: 2px;
}

/* Cont�iner do Mapa (Lado Direito) */
.map-container {
    flex: 1; 
    max-width: 600px;
    position: relative;
    min-height: 350px; /* Garante que o mapa tenha espa�o */
}

.map-container .sp-map-svg {
    width: 100%;       
    height: auto;      
    display: block;    
    max-width: 100%;   
}

/* Responsividade para Localidades */
@media (max-width: 900px) {
    .map-section-content {
        flex-direction: column; 
        gap: 50px;
    }
    
    .map-text-content {
        max-width: 100%; 
        padding-right: 0;
        text-align: center; /* Centraliza o texto em mobile */
    }

    .map-text-content h2 {
        font-size: 2.5rem; /* Reduz em mobile */
        text-align: center;
    }

    /* Centraliza a linha de destaque em mobile */
    .map-text-content .title-underline {
        margin: 10px auto 0;
    }

    .map-container {
        min-height: 300px; 
    }
}
/*===================================================================
  ANIMAÇÃO DE PULSAR E ESTILO DO TOOLTIP (Mapa)
===================================================================*/
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 199, 44, 0.5); /* Amarelo da cor-primaria */
    }
    70% {
        box-shadow: 0 0 0 15px rgba(255, 199, 44, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 199, 44, 0);
    }
}

/* Garante que o mapa seja o ponto de referência */
.map-container {
    position: relative; 
}

.map-marker {
    position: absolute;
    width: 15px; 
    height: 15px;
    /* CORREÇÃO: Centraliza o ponto na posição top/left definida no HTML */
    margin-left: -7.5px; 
    margin-top: -7.5px;
    
    background-color: var(--cor-secundaria); 
    border-radius: 50%;
    border: 2px solid var(--cor-primaria); 
    z-index: 10; 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    cursor: pointer; 
    transition: transform 0.2s ease-out; 
    animation: pulse 2s infinite; 
}

.map-marker:hover {
    transform: scale(1.3);
    z-index: 100; 
    animation: none; 

}

/* Tooltip (Caixa de texto no hover) */
.map-marker[data-city]:hover::after {
    content: attr(data-city); 
    position: absolute;
    bottom: 30px; 
    left: 50%;
    transform: translateX(-50%); 
    
    /* Estilização do Tooltip - Cores do Tema CLARO */
    white-space: nowrap; 
    background-color: #F8F8F8; 
    color: var(--cor-secundaria); 
    padding: 8px 15px;
    border-radius: 6px; 
    font-size: 0.9rem;
    font-weight: 500; 
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); 
    z-index: 20; 
    pointer-events: none; 
    animation: fadeInTooltip 0.3s forwards; 
}

/* Seta triangular do Tooltip */
.map-marker[data-city]:hover::before {
    content: '';
    position: absolute;
    bottom: 24px; 
    left: 50%;
    transform: translateX(-50%) rotate(45deg); 
    width: 12px; 
    height: 12px;
    background-color: #F8F8F8; /* Cor do Tema CLARO */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); 
    z-index: 19;
    pointer-events: none;
    animation: fadeInTooltip 0.3s forwards;
}

/* Animação para o Tooltip aparecer suavemente */
@keyframes fadeInTooltip {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/*===================================================================
  SEÇÃO DEPOIMENTOS
===================================================================*/
.depoimentos blockquote {
    max-width: 700px;
    margin: 0 auto;
    font-style: italic;
    font-size: 1.5rem;
    line-height: 1.8;
    position: relative;
    padding: 20px 0;
    text-align: center;
}

.depoimentos blockquote p {
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}

.depoimentos blockquote footer {
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    color: var(--cor-primaria);
    margin-top: 10px;
}

/* Ícone de aspas para destaque visual */
.depoimentos blockquote::before {
    content: "\201C"; 
    font-size: 8rem;
    color: rgba(255, 255, 255, 0.08); /* Ajustado para fundo escuro */
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    line-height: 1;
    z-index: 1;
}

/*===================================================================
  SEÇÃO CONTATO
===================================================================*/
.contato .subtitle {
    text-align: center;
    margin-bottom: 40px;
    font-size: 1.1rem;
    color: var(--cor-cinza-suave);
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
    display: grid;
    gap: 20px;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--font-principal);
}

.contact-form textarea {
    resize: vertical;
}

.contact-form button {
    width: 100%;
    border: none;
}

/* Estilo para a mensagem do formulário */
#form-message.success {
    color: #28a745;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    padding: 10px;
    border-radius: 5px;
}

#form-message.error {
    color: #dc3545;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    padding: 10px;
    border-radius: 5px;
}

/*===================================================================
  RODAPÉ (FOOTER)
===================================================================*/
.footer {
    background-color: var(--cor-fundo-escuro);
    color: var(--cor-texto-claro);
    padding: 40px 0 20px;
    text-align: center;
    font-size: 0.9rem;
}

.footer-links a,
.social-media a {
    color: var(--cor-texto-claro);
    margin: 0 15px;
    display: inline-block;
    padding: 5px;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a:hover {
    color: var(--cor-primaria);
}

.social-media {
    margin-bottom: 20px;
}

.social-media a i {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.social-media a:hover {
    color: var(--cor-primaria);
}

.footer p {
    margin: 5px 0;
    color: rgba(255, 255, 255, 0.7);
}

.footer .address {
    font-size: 0.8rem;
}


/*===================================================================
  BOTÃO FLUTUANTE WHATSAPP
===================================================================*/
.whatsapp-btn {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 55px;
    height: 55px;
    background-color: #25D366; 
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease;
}

.whatsapp-btn:hover {
    transform: scale(1.1);
}

/*===================================================================
  MEDIA QUERIES (Responsividade)
===================================================================*/

@media (max-width: 900px) {
    .nav {
        /* Esconder a navegação em telas menores (será manipulado pelo JS) */
        display: none;
        position: absolute;
        top: 67px; 
        left: 0;
        width: 100%;
        background-color: var(--cor-fundo-claro);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        padding: 20px 0;
    }
    
    /* Classe ativada pelo JS para exibir o menu mobile */
    .nav.open { 
        display: block;
    }
    
    .nav-list {
        flex-direction: column;
        align-items: center;
    }
    
    .nav-list li {
        margin: 10px 0;
        width: 90%;
        text-align: center;
    }
    
    .nav-list a {
        display: block;
        padding: 10px 0;
    }

    .btn-nav {
        margin: 10px 0;
        width: 90%;
    }

    .menu-toggle {
        display: block;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }

    .sobre-content {
        grid-template-columns: 1fr;
    }
    
    .sobre-icon-box {
        margin-top: 30px;
    }

    .servico-card {
        padding: 30px 20px;
    }
    
    .logo-img {
        max-height: 30px; 
    }
    
    /* CORREÇÃO: Altera o layout do mapa para coluna em mobile */
    .map-section-content {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }
    .map-text-content,
    .map-container {
        max-width: 100%;
        text-align: center;
    }
    .map-section-content .section-title-light {
        text-align: center;
    }
    .map-section-content .section-title-light::after {
        margin: 10px auto 0;
    }
}

@media (max-width: 600px) {
    .section {
        padding: 60px 0;
    }
    
    .section-title, .section-title-light {
        font-size: 2rem;
    }
    
    .hero {
        height: 60vh;
    }
    
    .hero h1 {
        font-size: 2rem;
    }

    .footer-links, .social-media {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 15px;
    }

    .footer-links a,
    .social-media a {
        margin: 0;
    }
}
/*===================================================================
  CARROSSEL DE CLIENTES (Logos) - Otimizado
===================================================================*/
.clientes .subtitle {
    text-align: center;
    margin-bottom: 40px;
    color: var(--cor-cinza-suave);
}

.logo-carousel {
    display: flex;
    /* Alterado para 'space-between' para melhor distribui��o inicial, mas o padding no logo � a chave */
    justify-content: center; 
    align-items: center;
    overflow: hidden; 
    padding: 30px 0;
    /* Permite quebra de linha em telas pequenas */
    flex-wrap: wrap; 
    gap: 20px; /* Adiciona um espa�o fixo entre os itens */
}

.logo-carousel img {
    max-height: 80px; 
    width: auto;
    filter: grayscale(100%) opacity(0.5); 
    transition: filter 0.3s ease;
    /* Reduzido/removido o margin aqui, usando 'gap' no container */
    margin: 10px 10px; /* Adiciona um pequeno respiro para o flex-wrap */
    /* Garante que as imagens sejam tratadas como blocos para o margin/padding */
    display: block; 
}

.logo-carousel img:hover {
    filter: grayscale(0%) opacity(1); 
}

/*===================================================================
  SEÇÃO LOCALIDADES (MAPA) - LAYOUT CORRIGIDO
===================================================================*/
/* ... (código) ... */

/*===================================================================
  MEDIA QUERIES (Responsividade)
===================================================================*/

@media (max-width: 900px) {
    /* ... (código) ... */
    
    /* Ajuste para o gap em telas menores */
    .logo-carousel {
        gap: 20px;
    }
}

@media (max-width: 600px) {
    /* ... (código) ... */
    
    /* Ajuste para telas muito pequenas */
    .logo-carousel img {
        max-height: 60px;
    }
}
/*===================================================================
  SE��O CALL-TO-ACTION (CTA Banner)
===================================================================*/

.cta-banner {
    background-color: var(--cor-secundaria); /* Fundo escuro */
    padding: 60px 0;
    text-align: center;
}

/* Garante que o conte�do do CTA fique em linha (t�tulo/bot�es) */
.cta-banner .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Permite quebrar linha em telas menores */
    gap: 30px;
}

.cta-content {
    text-align: left;
    max-width: 65%; /* Ocupa mais espa�o para o texto em desktop */
}

.cta-title {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cor-texto-claro); /* Texto branco */
    line-height: 1.2;
    margin-bottom: 10px;
}

.cta-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8); /* Cinza suave */
}

/* Cont�iner dos bot�es */
.cta-actions {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: flex-end; /* Alinha os bot�es � direita em desktop */
}

/* Estilo do Bot�o Principal do CTA (Cor Prim�ria) */
.btn-cta-primary {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria) !important; /* Cor de texto escura no bot�o amarelo */
    font-weight: 600;
    padding: 12px 25px;
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-cta-primary:hover {
    background-color: #ffd85d; /* Amarelo um pouco mais claro no hover */
}

/* Estilo do Bot�o Secund�rio do CTA (WhatsApp) */
.btn-cta-secondary {
    background-color: transparent;
    color: var(--cor-texto-claro) !important;
    font-weight: 400;
    padding: 12px 25px;
    border: 2px solid var(--cor-texto-claro);
    border-radius: 5px;
    text-decoration: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.btn-cta-secondary i {
    color: #25D366; /* Cor verde do WhatsApp */
    margin-right: 5px;
}

.btn-cta-secondary:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--cor-primaria);
}

/*===================================================================
  MEDIA QUERIES (Responsividade do CTA)
===================================================================*/

@media (max-width: 900px) {
    .cta-banner .container {
        flex-direction: column; /* Coloca o texto e os bot�es um embaixo do outro */
        text-align: center;
    }
    
    .cta-content {
        max-width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    
    .cta-title {
        font-size: 1.8rem;
    }
    
    .cta-actions {
        width: 100%; /* Ocupa a largura total */
        flex-direction: column; /* Coloca os bot�es um embaixo do outro */
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        width: 100%; /* Bot�es com largura total em mobile */
        max-width: 300px;
    }
}
/*===================================================================
  NOVO: CTA EM DESTAQUE (Full-Width, Centralizado)
===================================================================*/
.cta-destaque {
    background-color: var(--cor-secundaria); 
    color: var(--cor-texto-claro);
    padding: 80px 0; 
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 300px; 
}

.cta-destaque .container {
    max-width: 800px; 
}

.cta-destaque .section-title-light {
    font-size: 2.8rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-subtitle {
    font-size: 1.25rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 40px;
    font-weight: 300;
}

/* Cont�iner dos Bot�es Duplos */
.cta-buttons-duo {
    display: flex;
    justify-content: center;
    gap: 20px; /* Espa�o entre os bot�es */
    margin-top: 30px;
}

/* Estilo Base dos Novos Bot�es */
.cta-buttons-duo .btn {
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    flex-shrink: 0; /* Impede que os bot�es diminuam muito */
}

/* ?? Estilo do Bot�o WhatsApp (Principal Destaque) */
.btn-whatsapp-cta {
    background-color: var(--cor-primaria); /* Fundo Amarelo (Destaque) */
    color: var(--cor-secundaria); 
    border: 2px solid var(--cor-primaria);
}

.btn-whatsapp-cta:hover {
    background-color: var(--cor-texto-claro); /* Fundo Branco */
    border-color: var(--cor-texto-claro);
    color: var(--cor-secundaria);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* ?? Estilo do Bot�o E-mail (Secund�rio) */
.btn-email-cta {
    background-color: transparent; /* Fundo Transparente */
    color: var(--cor-texto-claro); /* Texto Branco */
    border: 2px solid var(--cor-texto-claro); /* Borda Branca */
}

.btn-email-cta:hover {
    background-color: var(--cor-texto-claro); /* Fundo Branco */
    color: var(--cor-secundaria); /* Texto Preto */
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.cta-buttons-duo .btn i {
    margin-right: 8px;
}


/* Responsividade do CTA */
@media (max-width: 768px) {
    .cta-destaque {
        min-height: 250px;
        padding: 60px 20px;
    }
    
    .cta-destaque .section-title-light {
        font-size: 2rem;
    }
    
    .cta-buttons-duo {
        flex-direction: column; /* Coloca os bot�es um em cima do outro */
        gap: 15px;
    }
    
    .cta-buttons-duo .btn {
        width: 100%; /* Ocupam a largura total em mobile */
        max-width: 300px; /* Limita a largura para n�o esticar demais */
        margin: 0 auto;
    }
}
/*===================================================================
  ESTILOS ESPEC�FICOS: P�GINA DETALHES DA OBRA
===================================================================*/

/* ------------------ 1. HEADER DO PROJETO ------------------ */
.project-hero {
    height: 60vh; /* Altura de 60% da viewport */
    min-height: 450px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Overlay semi-transparente para o texto branco sobressair */
    background-color: rgba(0, 0, 0, 0.65); 
    z-index: 1;
}

.project-header-content {
    position: relative;
    z-index: 2;
    color: var(--cor-texto-claro);
    text-align: center;
    max-width: 900px;
}

.project-header-content .eyebrow-text {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cor-primaria); /* Amarelo de destaque */
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.project-header-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.location-tag {
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}

.location-tag i {
    color: var(--cor-primaria);
    margin-right: 8px;
}


/* ------------------ 2. DETALHES E FATOS ------------------ */
.project-details {
    padding: 80px 0;
}

.details-grid {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 2/3 para descri��o, 1/3 para fatos */
    gap: 50px;
    align-items: start;
}

.details-description h2 {
    font-size: 2.2rem;
    color: var(--cor-secundaria);
    margin-bottom: 25px;
    border-bottom: 3px solid var(--cor-primaria); /* Linha de destaque */
    display: inline-block;
    padding-bottom: 10px;
}

.details-description p {
    font-size: 1.1rem;
    line-height: 1.7;
    margin-bottom: 20px;
    color: var(--cor-cinza-suave);
}

/* Caixa de Fatos Chaves */
.details-facts-box {
    background-color: var(--cor-cinza-clara);
    padding: 30px;
    border-radius: 8px;
    border-left: 5px solid var(--cor-primaria);
}

.details-facts-box h3 {
    font-size: 1.5rem;
    color: var(--cor-secundaria);
    margin-bottom: 20px;
}

.facts-list {
    list-style: none;
    padding: 0;
}

.facts-list li {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--cor-texto-principal);
    line-height: 1.4;
    padding-left: 0;
}

.facts-list li i {
    color: var(--cor-primaria);
    margin-right: 10px;
}


/* ------------------ 3. GALERIA DE IMAGENS ------------------ */
.project-gallery .section-title {
    margin-bottom: 40px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.gallery-img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.gallery-img:hover {
    transform: scale(1.02);
}

/* ------------------ RESPONSIVIDADE ------------------ */
@media (max-width: 900px) {
    .project-header-content h1 {
        font-size: 2.8rem;
    }
    
    .details-grid {
        grid-template-columns: 1fr; /* Pilha em telas menores */
        gap: 30px;
    }

    .details-description h2 {
        font-size: 1.8rem;
    }

    .details-facts-box {
        order: -1; /* Move o bloco de fatos para cima em mobile */
    }
    
    .gallery-grid {
        grid-template-columns: 1fr 1fr; /* Duas colunas em mobile */
    }
}

@media (max-width: 600px) {
    .project-header-content h1 {
        font-size: 2rem;
    }
    .project-hero {
        min-height: 350px;
    }
}
/*===================================================================
  ESTILOS ESPEC�FICOS: NAVEGA��O ENTRE PROJETOS
===================================================================*/
.project-navigation-section {
    padding: 60px 0;
    /* Usa um fundo sutilmente diferente para separar visualmente */
    background-color: var(--cor-fundo-claro); 
}

.project-navigation {
    display: flex;
    justify-content: space-between; /* Alinha um bot�o em cada ponta */
    align-items: center;
    padding: 0 10px; /* Pequeno padding horizontal */
}

/* Estilo para o bot�o Secund�rio/Retorno */
.btn-secondary-outline-dark {
    display: inline-block;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    
    /* Cores que funcionam em fundo claro */
    background-color: transparent;
    color: var(--cor-secundaria); 
    border: 2px solid var(--cor-secundaria);
    
    transition: all 0.3s ease;
}

.btn-secondary-outline-dark:hover {
    background-color: var(--cor-secundaria);
    color: var(--cor-texto-claro);
    transform: translateY(-2px);
}

/* O bot�o btn-primary (Ver Pr�ximo Projeto) j� tem estilo no seu tema */
.project-navigation .btn-primary {
    padding: 12px 25px;
    font-size: 1rem;
}

/* Responsividade */
@media (max-width: 600px) {
    .project-navigation {
        flex-direction: column; /* Pilha os bot�es um em cima do outro */
        gap: 20px;
    }
    
    .project-navigation a {
        width: 100%;
        max-width: 300px; /* Limita a largura em mobile */
        text-align: center;
    }
}
/*===================================================================
  SE��O SOBRE - NOVO LAYOUT COM IMAGENS E MISS�O/VIS�O
===================================================================*/
.sobre {
    padding: 100px 0;
    background-color: var(--cor-fundo-claro);
    overflow: hidden; /* Para garantir que os elementos de design fiquem contidos */
}

.sobre-main-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Colunas para Imagem e Texto */
    gap: 80px; /* Espa�o maior entre os blocos */
    align-items: center;
}

/* ------------------ Lado Esquerdo: Bloco de Imagens ------------------ */
.sobre-image-stack {
    position: relative;
    width: 100%;
    height: 500px; /* Altura fixa para o bloco de imagem */
    margin-left: -50px; /* Desloca para a esquerda para o efeito */
}

.sobre-main-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 80%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.sobre-secondary-img {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 60%;
    height: 60%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
    z-index: 3; /* Sobrep�e a imagem principal */
}

/* Caixa de Experi�ncia (35+ Anos) */
.experience-box {
    position: absolute;
    bottom: 60px; /* Posiciona acima da imagem secund�ria */
    left: -20px;
    width: 120px;
    height: 120px;
    background-color: var(--cor-primaria); /* Amarelo */
    color: var(--cor-secundaria);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    z-index: 4;
    padding: 10px;
}

.experience-years {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.experience-text {
    font-size: 0.8rem;
    font-weight: 400;
    text-align: center;
    margin-top: 5px;
}

/* Elementos de Design (Formas Geom�tricas) */
.design-element {
    position: absolute;
    width: 80px;
    height: 80px;
    background-color: rgba(var(--rgb-primaria), 0.1); /* Amarelo transparente */
    border-radius: 10px;
    z-index: 1;
}

.design-element.top-right {
    top: -20px;
    right: -20px;
    transform: rotate(45deg);
}

.design-element.bottom-left {
    bottom: -20px;
    left: -20px;
    transform: rotate(25deg);
}

/* ------------------ Lado Direito: Texto e Miss�o/Vis�o ------------------ */
.sobre-text-content {
    padding-left: 20px;
}

.sobre-text-content .eyebrow-text {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--cor-primaria);
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.sobre-text-content .section-title {
    font-size: 2.8rem;
    margin-bottom: 25px;
    line-height: 1.2;
    color: var(--cor-secundaria);
}

.lead-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--cor-cinza-suave);
    margin-bottom: 40px;
}

/* Grid de Miss�o e Vis�o */
.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr; /* Um item por linha */
    gap: 30px;
    margin-bottom: 40px;
}

.mv-item {
    display: flex;
    align-items: flex-start; /* Alinha o �cone com o topo do texto */
    gap: 20px;
}

.mv-icon {
    width: 60px;
    height: 60px;
    min-width: 60px; /* Garante que o �cone n�o encolha */
    background-color: var(--cor-cinza-clara);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    color: var(--cor-primaria);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.mv-details h3 {
    font-size: 1.3rem;
    color: var(--cor-secundaria);
    margin-bottom: 5px;
}

.mv-details p {
    font-size: 0.95rem;
    color: var(--cor-cinza-suave);
    line-height: 1.5;
}

/* Bot�o CTA da se��o Sobre */
.btn-sobre-cta {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 5px;
    text-transform: uppercase;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    border: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn-sobre-cta:hover {
    background-color: #f7d242; /* Amarelo um pouco mais claro */
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* ------------------ RESPONSIVIDADE ------------------ */
@media (max-width: 992px) {
    .sobre-main-grid {
        grid-template-columns: 1fr; /* Coloca os blocos um em cima do outro */
        gap: 50px;
    }

    .sobre-image-stack {
        height: 400px; /* Reduz a altura em mobile */
        margin-left: 0;
        margin: 0 auto; /* Centraliza a stack de imagens */
        max-width: 500px; /* Limita a largura em telas menores */
    }

    .sobre-main-img {
        width: 90%;
        height: 90%;
    }

    .sobre-secondary-img {
        width: 50%;
        height: 50%;
    }

    .experience-box {
        bottom: 30px;
        left: 20px;
        width: 100px;
        height: 100px;
    }
    .experience-years {
        font-size: 2rem;
    }
    .experience-text {
        font-size: 0.75rem;
    }

    .sobre-text-content {
        padding-left: 0; /* Remove o padding extra */
        text-align: center; /* Centraliza o texto */
    }

    .sobre-text-content .section-title {
        font-size: 2.2rem;
    }
    .sobre-text-content .lead-text {
        font-size: 1rem;
    }

    .mv-item {
        flex-direction: column; /* �cone em cima do texto em mobile */
        align-items: center;
        text-align: center;
        gap: 10px;
    }
}

@media (max-width: 576px) {
    .sobre {
        padding: 60px 0;
    }
    .sobre-image-stack {
        height: 350px;
    }
    .sobre-main-img {
        width: 100%;
        height: 100%;
    }
    .sobre-secondary-img {
        width: 45%;
        height: 45%;
        right: 10px;
        bottom: 10px;
    }
    .experience-box {
        width: 90px;
        height: 90px;
        left: 10px;
        bottom: 20px;
    }
    .experience-years {
        font-size: 1.8rem;
    }
    .sobre-text-content .section-title {
        font-size: 1.8rem;
    }
}
/*===================================================================
  SE��O SOBRE - Micro-Intera��o: Movimento das Imagens
===================================================================*/

/* Cont�iner principal para o hover */
.sobre-image-stack {
    /* ... (restante do c�digo original) ... */
    transition: transform 0.4s ease; /* Transi��o para o pr�prio container */
}

/* ?? Movimento principal das imagens no HOVER */
.sobre-image-stack:hover .sobre-main-img {
    /* Move a imagem principal levemente para tr�s e para o lado oposto */
    transform: translate(-5px, -5px) scale(1.02); 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transi��o suave */
}

.sobre-image-stack:hover .sobre-secondary-img {
    /* Move a imagem secund�ria para a frente e para o lado oposto */
    transform: translate(10px, 10px) scale(1.04); 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Transi��o suave */
}

/* Garante que as imagens tenham a transi��o inicial (fora do hover) */
.sobre-main-img, .sobre-secondary-img {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Opcional: Efeito no box de experi�ncia */
.sobre-image-stack:hover .experience-box {
    transform: scale(1.1) rotate(-5deg);
    transition: transform 0.4s ease;
}
/*===================================================================
  SE��O DEPOIMENTOS (CARROSSEL)
===================================================================*/
.depoimentos {
    background-color: var(--cor-secundaria); /* Fundo escuro */
    color: var(--cor-texto-claro);
    padding: 80px 0;
}

.depoimento-card {
    background-color: #2b2b2b; /* Um cinza mais claro para o fundo do card */
    color: var(--cor-texto-claro);
    padding: 40px;
    border-radius: 8px;
    margin: 20px 15px; /* Margem para que o slider funcione bem */
    height: auto;
    min-height: 280px; /* Garante altura para evitar 'saltos' */
    display: flex !important; 
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.depoimento-card:hover {
    transform: translateY(-5px);
}

.quote-icon {
    font-size: 2.5rem;
    color: var(--cor-primaria);
    margin-bottom: 20px;
    line-height: 1;
}

.depoimento-text {
    font-size: 1.1rem;
    line-height: 1.6;
    font-style: italic;
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.9);
}

.depoimento-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 15px;
}

.cliente-nome {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    color: var(--cor-texto-claro);
}

.cliente-cargo {
    font-size: 0.9rem;
    color: var(--cor-primaria);
    margin: 0;
}

/* ?? Ajuste dos Estilos de Navega��o do Slick (Setas e Pontos) */
.depoimentos-slider .slick-prev,
.depoimentos-slider .slick-next {
    z-index: 50;
    width: 30px;
    height: 30px;
}

.depoimentos-slider .slick-prev {
    left: -10px;
}
.depoimentos-slider .slick-next {
    right: -10px;
}

/* Cor das setas */
.depoimentos-slider .slick-prev:before,
.depoimentos-slider .slick-next:before {
    color: var(--cor-primaria) !important;
    font-size: 30px;
}
/* Cor dos pontos (dots) */
.slick-dots li button:before {
    color: var(--cor-cinza-suave) !important;
    opacity: 0.8 !important;
}
.slick-dots li.slick-active button:before {
    color: var(--cor-primaria) !important;
    opacity: 1 !important;
}

/* Responsividade do Slick em Mobile */
@media (max-width: 600px) {
    .depoimento-card {
        margin: 10px 5px; /* Margem menor para telas pequenas */
        padding: 30px;
    }
    .depoimentos-slider .slick-prev {
        left: -5px;
    }
    .depoimentos-slider .slick-next {
        right: -5px;
    }
}
/*===================================================================
  RODAP� (NOVO LAYOUT EM GRID)
===================================================================*/
.footer {
    background-color: var(--cor-secundaria); /* Fundo escuro */
    color: var(--cor-texto-claro);
    padding: 60px 0 0; /* Padding superior maior */
    font-size: 0.95rem;
}

.footer-grid {
    display: grid;
    /* 4 colunas com tamanhos flex�veis, focando na organiza��o */
    grid-template-columns: 1.5fr 1fr 1fr 1.5fr; 
    gap: 40px;
    padding-bottom: 40px; /* Separa as colunas da faixa de copyright */
}

.footer-col {
    /* Garante que o texto se alinhe bem */
}

/* T�tulos das Colunas */
.footer-col h3 {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--cor-texto-claro);
    position: relative;
}

.footer-col h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--cor-primaria);
    margin-top: 8px;
    border-radius: 2px;
}

/* Coluna 1: Logo e Sobre */
.logo-img-footer {
    max-height: 40px;
    margin-bottom: 15px;
}

.footer-about-text {
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* Estilo da Newsletter (Inline) */
.footer-newsletter {
    display: flex;
    margin-top: 15px;
}

.footer-newsletter input[type="email"] {
    flex-grow: 1;
    padding: 10px 15px;
    border: none;
    border-radius: 5px 0 0 5px;
    background-color: #333333;
    color: var(--cor-texto-claro);
    font-family: var(--font-principal);
}

.footer-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter .btn-primary-small {
    padding: 10px 15px;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    font-weight: 600;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.footer-newsletter .btn-primary-small:hover {
    background-color: #f7d242;
}

/* Colunas 2 e 3: Links */
.footer-links-list {
    list-style: none;
}

.footer-links-list li {
    margin-bottom: 10px;
}

.footer-links-list a {
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.3s ease;
    display: flex; /* Para alinhar �cone e texto */
    align-items: center;
}

.footer-links-list a:hover {
    color: var(--cor-primaria);
}

.footer-links-list a i {
    font-size: 0.8rem;
    margin-right: 10px;
    color: var(--cor-primaria);
}

/* Coluna 4: Contato */
.footer-contact-info {
    list-style: none;
}

.footer-contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.footer-contact-info li i {
    font-size: 1.1rem;
    margin-right: 15px;
    margin-top: 3px;
    color: var(--cor-primaria);
}

.footer-contact-info li a,
.footer-contact-info li p {
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

.footer-contact-info li a:hover {
    color: var(--cor-primaria);
}

/* �cones de M�dias Sociais */
.social-media-footer {
    margin-top: 30px;
}

.social-media-footer a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--cor-texto-claro);
    font-size: 1rem;
    margin-right: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.social-media-footer a:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

/* Faixa Inferior de Copyright */
.footer-bottom {
    background-color: #121212; /* Fundo mais escuro para destaque */
    padding: 15px 0;
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
    color: var(--cor-primaria);
}

/* ===================================================================
  RESPONSIVIDADE DO RODAP�
===================================================================*/
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr; /* 2 colunas em tablet */
    }
}

@media (max-width: 576px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 coluna em mobile */
        text-align: center;
        gap: 30px;
    }
    
    .footer-col h3::after {
        margin: 8px auto 0; /* Centraliza a linha em mobile */
    }
    
    .footer-links-list a,
    .footer-contact-info li {
        justify-content: center;
    }

    .footer-newsletter {
        max-width: 300px;
        margin: 0 auto;
    }

    .social-media-footer {
        text-align: center;
    }
}/*===================================================================
  RODAP� (LAYOUT DE 2 COLUNAS)
===================================================================*/
.footer {
    background-color: var(--cor-secundaria); /* Fundo escuro */
    color: var(--cor-texto-claro);
    padding: 60px 0 0; 
    font-size: 0.95rem;
}

.footer-grid-2-col {
    display: grid;
    /* 2 colunas iguais: 1fr 1fr */
    grid-template-columns: 1fr 1fr; 
    gap: 40px;
    padding-bottom: 40px; 
}

/* Coluna 1: Logo, Sobre e Newsletter */
.logo-img-footer {
    max-height: 40px;
    filter: brightness(0) invert(1); /* Tenta for�ar a logo a ser branca para o fundo escuro */
    margin-bottom: 15px;
}
.logo-footer-clara {
    /* Se a sua imagem de logo j� for clara, remova o filtro acima. */
    filter: none;
}

.footer-about-text {
    margin-bottom: 25px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
}

/* T�tulos da Coluna de Contato */
.footer-col-contact h3 {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--cor-texto-claro);
    position: relative;
    /* Linha amarela de destaque */
}

.footer-col-contact h3::after {
    content: '';
    display: block;
    width: 30px;
    height: 3px;
    background-color: var(--cor-primaria);
    margin-top: 8px;
    border-radius: 2px;
}

/* Estilo da Newsletter (Inline) */
.footer-newsletter {
    display: flex;
    margin-top: 15px;
    max-width: 350px; /* Limita a largura do campo */
}

.footer-newsletter input[type="email"] {
    flex-grow: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 5px 0 0 5px;
    background-color: #333333; /* Fundo do input mais escuro que o footer */
    color: var(--cor-texto-claro);
    font-family: var(--font-principal);
    font-size: 1rem;
}

.footer-newsletter input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.btn-primary-small {
    padding: 12px 20px;
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
    font-weight: 600;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn-primary-small:hover {
    background-color: #f7d242;
}


/* Coluna 2: Contato */
.footer-contact-info {
    list-style: none;
    padding: 0;
}

.footer-contact-info li {
    display: flex;
    align-items: center; /* Alinha o texto na vertical com o �cone */
    margin-bottom: 20px;
}

.footer-contact-info li i {
    font-size: 1.1rem;
    margin-right: 15px;
    color: var(--cor-primaria);
    min-width: 20px; /* Garante que o �cone mantenha o alinhamento */
}

.footer-contact-info li a,
.footer-contact-info li p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.4;
    margin: 0;
}

.footer-contact-info li a:hover {
    color: var(--cor-primaria);
}

/* Faixa Inferior de Copyright */
.footer-bottom {
    background-color: #121212; /* Fundo mais escuro para destaque */
    padding: 15px 0;
    text-align: center;
    font-size: 0.85rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

.footer-bottom a {
    color: var(--cor-primaria);
}


/* ===== Rodap� Minimalista Reobote ===== */

.footer-minimalist {
  background-color: #0d0d0d; /* Fundo escuro elegante */
  color: #f1f1f1;
  padding: 3rem 1.5rem;
  font-family: "Poppins", Arial, sans-serif;
  text-align: center;
  border-top: 2px solid #2c2c2c;
}

.footer-minimalist .container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
}

/* Marca e slogan */
.footer-brand-minimal img.footer-logo-minimal {
  width: 160px;
  height: auto;
  margin-bottom: 0.5rem;
  filter: brightness(0) invert(1); /* garante contraste da logo clara */
}

.footer-brand-minimal .tagline {
  font-size: 0.95rem;
  color: #bfbfbf;
  margin: 0;
}

/* Navega��o */
.footer-nav-minimal {
  font-size: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}

.footer-nav-minimal a {
  color: #f1f1f1;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-nav-minimal a:hover {
  color: #00bfa6; /* Cor destaque */
}

.footer-nav-minimal .separator {
  color: #666;
}

/* Redes sociais */
.social-media-minimal {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.social-media-minimal a {
  color: #f1f1f1;
  font-size: 1.3rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-media-minimal a:hover {
  color: #00bfa6;
  transform: translateY(-3px);
}

/* Informa��es legais */
.footer-info-minimal {
  font-size: 0.85rem;
  color: #a8a8a8;
  text-align: center;
  line-height: 1.5;
}

.footer-info-minimal strong {
  color: #ffffff;
}

.footer-info-minimal a {
  color: #bfbfbf;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-info-minimal a:hover {
  color: #00bfa6;
}

.privacy-links {
  margin-top: 0.5rem;
  font-size: 0.8rem;
  opacity: 0.8;
}

/* Responsividade */
@media (min-width: 768px) {
  .footer-minimalist .container {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-brand-minimal img.footer-logo-minimal {
    width: 180px;
  }

  .footer-info-minimal {
    font-size: 0.9rem;
  }
}

@media (prefers-color-scheme: light) {
  .footer-minimalist {
    background-color: #f9f9f9;
    color: #222;
  }

  .footer-minimalist .footer-nav-minimal a,
  .footer-minimalist .social-media-minimal a {
    color: #222;
  }

  .footer-minimalist .footer-nav-minimal a:hover,
  .footer-minimalist .social-media-minimal a:hover {
    color: #00bfa6;
  }
}

/*===================================================================
  ESTILOS: P�GINA DE CONTATO DEDICADA
===================================================================*/

/* Hero da P�gina (Cabe�alho) */
.page-hero {
    padding: 100px 0;
    color: var(--cor-texto-claro);
    background-color: var(--cor-secundaria);
}
.page-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
}
.page-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    max-width: 600px;
    margin: 0 auto;
}

/* GRID PRINCIPAL DE CONTATO */
.contato-detalhes {
    padding: 80px 0;
    background-color: var(--cor-fundo-claro);
}

.contato-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    gap: 60px;
    align-items: center;
}

/* LADO ESQUERDO: INFORMA��ES DE CONTATO */
.contato-info-container {
    padding-right: 20px;
}
.sub-section-title {
    font-size: 2rem;
    color: var(--cor-secundaria);
    margin-bottom: 25px;
    border-left: 5px solid var(--cor-primaria);
    padding-left: 15px;
    line-height: 1.2;
}
.lead-text {
    font-size: 1.05rem;
    color: var(--cor-cinza-suave);
    margin-bottom: 40px;
}

.info-item-list {
    margin-bottom: 40px;
}
.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    gap: 15px;
}
.info-item i {
    font-size: 1.5rem;
    color: var(--cor-primaria);
    min-width: 25px;
    margin-top: 5px;
}
.info-item h4 {
    font-size: 1.2rem;
    color: var(--cor-secundaria);
    margin-bottom: 3px;
}
.info-item p a, .info-item p {
    color: var(--cor-cinza-suave);
    margin: 0;
}

.social-links-contato a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--cor-cinza-clara);
    color: var(--cor-secundaria);
    font-size: 1.1rem;
    margin-right: 10px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.social-links-contato a:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-secundaria);
}

/* LADO DIREITO: FORMUL�RIO */
.contato-form-container {
    padding: 40px;
    border-radius: 8px;
    background-color: var(--cor-cinza-clara);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.contato-form-container .sub-section-title {
    border-left: none;
    padding-left: 0;
    text-align: center;
    margin-bottom: 30px;
}

.contact-form-page .form-group {
    margin-bottom: 20px;
}

.contact-form-page input[type="text"],
.contact-form-page input[type="email"],
.contact-form-page input[type="tel"],
.contact-form-page textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1rem;
    font-family: var(--font-principal);
    transition: border-color 0.3s ease;
}

.contact-form-page input:focus,
.contact-form-page textarea:focus {
    border-color: var(--cor-primaria);
}

.contact-form-page textarea {
    resize: vertical;
}

.btn-block {
    width: 100%;
    text-align: center;
}

/* Responsividade */
@media (max-width: 900px) {
    .contato-grid {
        grid-template-columns: 1fr; /* Coloca as colunas uma sobre a outra em mobile */
        gap: 40px;
    }
    .contato-info-container {
        padding-right: 0;
    }
    .page-title {
        font-size: 2.5rem;
    }
}
* Ajuste do Iframe do Mapa para largura total e altura fixa */
.mapa-embed {
    padding: 0; /* Remove o padding da se��o para que o mapa ocupe a borda */
}
.mapa-embed iframe {
    display: block;
    width: 100%;
    height: 350px; /* Mant�m a altura definida */
}

/* Estilos Adicionais para o Rodap� Minimalista (Se necess�rio) */

.footer-copyright .dev-tag {
    font-size: 0.75rem; /* Fonte menor para o desenvolvedor */
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
    display: block;
}
  /* Layout Geral da Se��o */
    .portfolio-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        margin-top: 40px;
    }

    /* --- Estilo da Obra em Destaque (Esquerda/Topo) --- */
    .portfolio-main-feature {
        flex: 1 1 100%; /* Mobile: 100% */
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    
    @media (min-width: 992px) {
        .portfolio-main-feature {
            flex: 0 0 40%; /* Desktop: 40% da largura */
        }
        .portfolio-mini-slider-container {
            flex: 0 0 57%; /* Desktop: Restante da largura */
        }
    }

    .main-feature-img {
        position: relative;
        height: 100%;
        min-height: 400px;
    }

    .main-feature-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    .main-feature-img:hover img {
        transform: scale(1.05);
    }

    .main-feature-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
        padding: 30px;
        color: #fff;
    }

    .badge-destaque {
        background-color: #ffc107; /* Cor amarela/destaque */
        color: #000;
        padding: 5px 10px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.75rem;
        border-radius: 4px;
        margin-bottom: 10px;
        display: inline-block;
    }

    .main-feature-content h3 {
        color: #fff;
        margin-bottom: 5px;
        font-size: 1.8rem;
    }

    .feature-location {
        color: #ccc;
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

     /* Layout Geral */
    .portfolio-wrapper {
        display: flex;
        flex-direction: column; /* Empilha um embaixo do outro */
        gap: 30px;
        margin-top: 40px;
    }

    /* --- 1. ESTILO DA OBRA DESTAQUE (Formato 12x4) --- */
    .portfolio-main-feature {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
        position: relative;
    }

    .main-feature-img-ratio {
        width: 100%;
        /* AQUI EST� A M�GICA DO 12x4 */
        aspect-ratio: 12 / 4; 
        position: relative;
    }

    /* Fallback para navegadores antigos que n�o suportam aspect-ratio */
    @supports not (aspect-ratio: 12 / 4) {
        .main-feature-img-ratio {
            height: 0;
            padding-bottom: 33.33%; /* 4 dividido por 12 = 33.33% */
        }
    }

    .main-feature-img-ratio img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        object-fit: cover; /* Garante que a imagem preencha o 12x4 sem esticar */
        transition: transform 0.5s ease;
    }

    .portfolio-main-feature:hover img {
        transform: scale(1.03);
    }

    .main-feature-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        /* Gradiente mais suave para leitura em imagem larga */
        background: linear-gradient(to top, rgba(0,0,0,0.95) 10%, rgba(0,0,0,0.6) 50%, transparent 100%);
        padding: 40px 30px 20px 30px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .badge-destaque {
        background-color: #ffc107;
        color: #000;
        padding: 5px 12px;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 0.75rem;
        border-radius: 4px;
        align-self: flex-start;
        margin-bottom: 10px;
    }

    .main-feature-content h3 {
        font-size: 2rem;
        margin-bottom: 5px;
        color: #fff;
    }

    /* Ajuste para Mobile: 12x4 fica muito fino no celular, vamos aumentar a altura */
    @media (max-width: 768px) {
        .main-feature-img-ratio {
            aspect-ratio: 16 / 9; /* Mais quadrado no celular para caber o texto */
        }
        @supports not (aspect-ratio: 16 / 9) {
            .main-feature-img-ratio { padding-bottom: 56.25%; }
        }
        .main-feature-content h3 { font-size: 1.5rem; }
    }

    /* --- 2. ESTILO DO CARROSSEL (Abaixo) --- */
    .portfolio-carousel-row {
        width: 100%;
    }

    .slider-item {
        padding: 0 10px;
    }

    .slider-card {
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        height: 220px; /* Altura fixa para as imagens do carrossel */
        cursor: pointer;
    }

    .slider-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    /* Efeito Hover do Carrossel */
    .slider-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 39, 118, 0.9); /* Azul escuro */
        opacity: 0;
        transition: opacity 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 15px;
    }

    .slider-card:hover .slider-overlay { opacity: 1; }
    .slider-card:hover img { transform: scale(1.1); }

    .overlay-text h4 { color: #fff; font-size: 1.1rem; margin-bottom: 5px; font-weight: 700; }
    .overlay-text .city { color: #ffc107; font-size: 0.9rem; display: block; margin-bottom: 8px; }
    .overlay-text .work-type { color: #eee; font-size: 0.85rem; font-style: italic; }

    /* Setas do Slick */
    .slick-prev:before, .slick-next:before { color: #333; font-size: 24px; opacity: 0.8; }
    .slick-dots li button:before { font-size: 10px; }
/* 1. Container Principal (portfolio-main-feature) */
.portfolio-main-feature {
    position: relative;
    width: 100%;
    aspect-ratio: 12 / 4; /* Formato 3:1 */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    background-color: #000;
}

/* 2. Container da Imagem (main-feature-img-ratio) */
.main-feature-img-ratio {
    position: relative; /* CRUCIAL: Cont�iner pai para posicionar o overlay */
    width: 100%;
    height: 100%;
}

/* Garante que a imagem cubra toda a �rea */
.main-feature-img-ratio img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* A imagem cobre sem deformar */
    display: block;
}

/* 3. CONTE�DO DE TEXTO (Overlay e Centraliza��o) */
.main-feature-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Fica por cima da imagem */
    
    /* Centraliza��o Total com Flexbox */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centro Vertical */
    align-items: center;     /* Centro Horizontal */
    text-align: center;      /* CRUCIAL: Centraliza o texto dentro dos elementos */
    
    /* Overlay Escuro */
    background: rgba(0, 0, 0, 0.55); 
    padding: 20px;
    color: #fff;
    transition: background 0.3s;
}

.portfolio-main-feature:hover .main-feature-content {
    background: rgba(0, 0, 0, 0.4); 
}

/* Adicionando o estilo para o bot�o que estava faltando no seu HTML */
.btn-sm {
    padding: 8px 20px;
    font-size: 0.9rem;
}

//* ======= ANIMA��O NO MAPA ======= */

/* Zoom suave ao carregar */
.map-container {
    animation: zoomIn 1.5s ease-out forwards;
    transform: scale(0.94);
}

@keyframes zoomIn {
    to {
        transform: scale(1);
    }
}

/* ======= MARCADORES ANIMADOS ======= */

.map-marker {
    width: 18px;
    height: 18px;
    background: #e9b10c;
    border: 3px solid #000;
    border-radius: 50%;
    position: absolute;
    cursor: pointer;
    box-shadow: 0 0 10px #e9b10c;
    transition: transform .2s ease;
    
    /* anima��o cont�nua */
    animation: pulse 2.5s infinite ease-in-out;
}

.map-marker:hover {
    transform: scale(1.3);
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0px #e9b10c;
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 18px #e9b10c;
        transform: scale(1.18);
    }
    100% {
        box-shadow: 0 0 0px #e9b10c;
        transform: scale(1);
    }
}

/* ====== FADE SUAVE NO T�TULO ====== */
.localidades-title,
.eyebrow-text,
.underline {
    animation: fadeInUp 1s ease-out forwards;
    opacity: 0;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Estilo base para garantir responsividade */
img { max-width: 100%; height: auto; }

/* Menu Mobile */
@media (max-width: 768px) {
    .nav {
        display: none; /* Esconde por padr�o no mobile */
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background: #FFFFFF;
        padding: 20px;
        z-index: 1000;
    }

    .nav.active {
        display: block; /* Mostra quando clicado */
    }

    .nav-list {
        flex-direction: column;
        gap: 15px;
    }

    .hero h1 { font-size: 1.8rem; } /* Diminui t�tulo no mobile */
    .contato-grid { grid-template-columns: 1fr; } /* Coluna �nica no mobile */
}

/* Garante que os marcadores do mapa n�o sumam */
.map-marker {
    position: absolute;
    width: 15px;
    height: 15px;
    background: var(--cor-primaria);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
/* No style.css */

/* Estilo moderno do bot�o Hamburguer */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--cor-secundaria);
    border-radius: 10px;
    transition: all 0.3s ease;
}

/* Overlay do Menu Mobile */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Escondido fora da tela */
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 26, 0.98); /* Preto Reobote com leve transpar�ncia */
    backdrop-filter: blur(10px); /* Efeito de desfoque moderno */
    z-index: 999;
    transition: right 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mobile-menu-overlay.active {
    right: 0;
}

.close-menu {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 3rem;
    color: var(--cor-primaria);
    background: none;
    border: none;
    cursor: pointer;
}

.mobile-nav-list {
    list-style: none;
    text-align: center;
}

.mobile-nav-list li {
    margin: 25px 0;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
}

.mobile-menu-overlay.active .mobile-nav-list li {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-list a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--cor-texto-claro);
    text-transform: uppercase;
}

.mobile-nav-list a:hover {
    color: var(--cor-primaria);
}

.mobile-socials {
    margin-top: 40px;
    display: flex;
    gap: 20px;
}

.mobile-socials i {
    font-size: 1.5rem;
    color: var(--cor-primaria);
}

/* Exibir bot�o apenas em mobile */
@media (max-width: 900px) {
    .nav { display: none; } /* Esconde menu desktop */
    .menu-toggle { display: flex; }
}
/* Garante que o bot�o hamb�rguer apare�a em telas menores */
@media (max-width: 900px) {
    .menu-toggle {
        display: block; /* Estava como none */
        font-size: 1.8rem;
        color: var(--cor-secundaria);
        z-index: 1001;
    }

    .nav {
        position: fixed;
        top: 0;
        right: -100%; /* Come�a escondido */
        width: 250px;
        height: 100vh;
        background: var(--cor-fundo-claro);
        box-shadow: -2px 0 5px rgba(0,0,0,0.1);
        transition: 0.4s ease;
        padding-top: 80px;
        z-index: 1000;
    }

    /* Classe que o JavaScript vai ativar */
    .nav.open {
        right: 0;
    }

    .nav-list {
        flex-direction: column;
        align-items: center;
    }

    .nav-list li {
        margin: 20px 0;
    }
}
/* For�ar exibi��o dos detalhes no mobile */
@media (max-width: 768px) {
    /* Garante que o conte�do do projeto em destaque apare�a */
    .main-feature-content {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        background: rgba(15, 23, 42, 0.9); /* Fundo escuro para dar leitura */
        padding: 15px;
    }

    /* Garante que o overlay dos itens do carrossel apare�a */
    .slider-overlay {
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(15, 23, 42, 0.8) !important;
    }

    .overlay-text {
        transform: translateY(0) !important;
        opacity: 1 !important;
    }

    /* Estiliza��o extra para o bot�o no mobile */
    .btn-mobile-visible {
        display: inline-block !important;
        margin-top: 10px;
        padding: 8px 15px;
        font-size: 0.8rem;
    }
    
    /* Ajuste de altura para n�o cortar o texto */
    .slider-card {
        min-height: 250px;
    }
}
/* --- CONTAINER PRINCIPAL --- */
.featured-project-card {
    display: flex;
    flex-direction: row; /* Lado a lado no Desktop */
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    margin-bottom: 40px;
    border: 1px solid #eee;
}

/* --- �REA DA IMAGEM --- */
.featured-image {
    flex: 1.2;
    position: relative;
    min-height: 350px;
}

.featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-image .badge-destaque {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #FFC72C;
    color: #1A1A1A;
    padding: 6px 15px;
    font-weight: 700;
    border-radius: 50px;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* --- �REA DE INFORMA��O --- */
.featured-info {
    flex: 1;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #1A1A1A; /* Fundo escuro para contraste */
    color: white;
}

.featured-meta h3 {
    font-size: 2.2rem;
    margin-bottom: 10px;
    color: #FFC72C;
}

.featured-meta .location {
    font-size: 1rem;
    color: #ccc;
    margin-bottom: 20px;
}

.featured-info .description {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #eee;
}

/* --- BOT�O ESTILIZADO --- */
.btn-detalhes-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #FFC72C;
    color: #1A1A1A;
    padding: 15px 30px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    width: 100%; /* No mobile ser� full width */
    max-width: 250px;
}

.btn-detalhes-mobile i {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.btn-detalhes-mobile:hover {
    background: #f7d242;
    transform: translateY(-3px);
}

.btn-detalhes-mobile:hover i {
    transform: translateX(5px);
}

/* --- ADAPTA��O PARA MOBILE (O PONTO CHAVE) --- */
@media (max-width: 992px) {
    .featured-project-card {
        flex-direction: column; /* Empilha no mobile */
        border-radius: 15px;
    }

    .featured-image {
        min-height: 250px; /* Imagem menor no celular */
        flex: none;
    }

    .featured-info {
        padding: 30px 20px;
        text-align: center; /* Centraliza o texto no celular */
    }

    .featured-meta h3 {
        font-size: 1.8rem;
    }

    .featured-action {
        display: flex;
        justify-content: center;
    }

    .btn-detalhes-mobile {
        max-width: 100%; /* Bot�o ocupa a largura total dispon�vel */
        font-size: 1rem;
    }
}