/* --- Regras Globais e de Reset --- */
* {
    box-sizing: border-box;
}

html {
    height: 100%;
}
:root {
    --header-height: 76px;
    /* Novas variáveis para cores e tipografia, para facilitar a manutenção */
    --cor-primaria: #000000;
    --cor-secundaria: #62685A;
    --cor-destaque: #C7C9A4;
    --cor-cinza-claro: #AAAAAA;
    --cor-cinza-escuro: #333333;
    --cor-texto-suave: #777777;

    --font-family-principal: 'At Hauss Hero', sans-serif;
    --font-weight-thin: 100; /* Se tiver */
    --font-weight-extra-light: 200; /* Se tiver */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semi-bold: 600;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 800; /* Se tiver */
    --font-weight-black: 900; /* Se tiver */
}

body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-family-principal);
    background-color: #fafafa;
    color: #000;
    padding-top: var(--header-height);
    line-height: 1.6;

    /* Efeito de Fade In para a página toda */
    opacity: 0;
    animation: fadeInPage 0.5s ease-in-out forwards;
}

/* Keyframes para a animação de Fade In da página */
@keyframes fadeInPage {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* --- Fontes --- */
@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-Light.ttf') format('truetype');
    font-weight: 300; /* Peso para "Light" */
    font-style: normal;
}

@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-Regular.ttf') format('truetype');
    font-weight: 400; /* Peso para "Regular" */
    font-style: normal;
}

@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-Medium.ttf') format('truetype');
    font-weight: 500; /* Peso para "Medium" */
    font-style: normal;
}

@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-Semibold.ttf') format('truetype');
    font-weight: 600; /* Peso para "Semibold" */
    font-style: normal;
}

@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-Bold.ttf') format('truetype');
    font-weight: 700; /* Peso para "Bold" */
    font-style: normal;
}

/* Se você tiver itálicos: */
@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-Italic.ttf') format('truetype');
    font-weight: 400; /* Ou o peso correspondente ao Regular Italic */
    font-style: italic;
}

@font-face {
    font-family: 'At Hauss Hero';
    src: url('../fontes/AtHaussAero-LightItalic.ttf') format('truetype');
    font-weight: 300; /* Ou o peso correspondente ao Light Italic */
    font-style: italic;
}



/* --- Cabeçalhos (H1, H2, H3, Padrão) --- */
h1 {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 1rem;
    text-align: left;
    color: var(--cor-primaria);
    line-height: 1.2;
}

h2 {
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--cor-cinza-escuro);
    margin-bottom: 1.5rem;
    text-align: center;
    line-height: 1.3;
}

h3 {
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: left;
    color: var(--cor-primaria);
    line-height: 1.4;
}

h3 img {
    width: 24px;
    height: 24px;
    margin-right: 0.75rem;
}

/* Parágrafos gerais */
p {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.2rem;
    text-align: justify;
    color: var(--cor-primaria);
}

p strong {
    color: var(--cor-primaria);
    font-weight: var(--font-weight-bold);
}


/* Classes para alinhamento e deslocamento específicos */

.deslocar-conteudo-direita {
    text-align: left; /* Alinha o texto dentro do bloco à direita */
    margin-left: auto; /* Empurra o bloco para a direita */
    margin-right: 0;
    width: 70%;
}
.deslocar-conteudo-esquerda {
    text-align: left; /* Alinha o texto dentro do bloco à esquerda */
    margin-left: 0;
    margin-right: auto; /* Empurra o bloco para a esquerda */
    width: 70%;
}

/* ---Títulos e Textos Específicos --- */
/* Subtítulo específico */
.subtitulo {
    color: var(--cor-destaque);
    text-align: left;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 2.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-transform: uppercase;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.08em;
}

.subtitulo img {
    height: 2rem;
    width: auto;
}

.centralizado {
    text-align: center;
    display: block;
    margin: 0 auto 20px;
}

/* --- Navegação (Header) --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: var(--header-height);
}
header .logo,
header .menu {
    min-width: 0;
}
.logo img {
    height: 40px;
}
.hamburger {
    display: none;
    flex-direction: column;
    width: 30px;
    height: 21px;
    justify-content: space-between;
    cursor: pointer;
}
.hamburger span {
    height: 3px;
    background: #000;
    border-radius: 2px;
}
.menu {
    list-style: none;
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
}
nav a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color 0.3s ease;
}
.mobile-nav a:hover {
    color: var(--cor-destaque);
}
.mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    transition: right 0.3s ease;
    z-index: 1000;
}
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}


body.mobile-menu-open .mobile-nav-overlay {
    opacity: 1;
    visibility: visible;
}

body.mobile-menu-open {
    overflow: hidden;
}
.mobile-nav.open {
    right: 0;
}

.menu li a {
    text-decoration: none;
    color: var(--cor-primaria);
    font-weight: bold;
    padding: 0.5rem 0;
    position: relative;
    transition: color 0.3s ease;
}
.menu li a:hover {
    color: var(--cor-destaque);
}

.mobile-nav a {
    text-decoration: none;
    font-size: 1.5rem;
    color: var(--cor-destaque);
    margin: 1rem 0;
    padding-left: 2rem;
}
.close-btn {
    position: absolute;
    top: 1.5rem;
    right: 2rem;
    background: transparent;
    border: none;
    color: var(--cor-destaque);
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 1001;
}




/* --- NOVOS ESTILOS PARA VARIAÇÕES DE FONTE --- */

.subtitulo-suave {
    font-family: var(--font-family-principal);
    font-weight: var(--font-weight-light);
    font-size: 1.8rem;
    color: var(--cor-cinza-escuro);
    text-align: center;
    margin-top: 0;
    margin-bottom: 3rem;
    line-height: 1.4;
}

p.light-text {
    font-weight: var(--font-weight-light);
    color: var(--cor-texto-suave);
}

.legenda-imagem {
    font-family: var(--font-family-principal);
    font-size: 0.9rem;
    color: var(--cor-texto-suave);
    font-style: italic;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.legenda-imagem.light {
    font-weight: var(--font-weight-light);
    font-style: italic;
}

.text-emphasis {
    font-weight: var(--font-weight-medium);
    color: var(--cor-secundaria);
}





/* --- Seção Principal (Main) --- */
main {
    padding: 0;
    margin: 0;
    max-width: 100%;
    flex-grow: 1;
    justify-content: center;

}


/* --- Página 'Sobre' --- */
.secao-sobre {
    padding: 2rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: transparent;
    color: #000;
}
.secao-sobre p {
    text-align: left;
}

/* --- ESTILO PARA A PRIMEIRA SEÇÃO (HERO SECTION) --- */
.secao-hero-sobre {
    display: grid; 
    grid-template-areas: "stack"; 
    width: 100vw; 
    padding: 0;
    color: var(--cor-primaria);
    text-align: left;
    margin: 0;
    overflow: hidden;
    position: relative;
    min-height: auto;
}

/* Estilo para a tag <img> */
.secao-hero-sobre .hero-image {
    grid-area: stack;
    width: 100%; 
    height: auto; 
    display: block; 
    object-fit: cover; 
    object-position: center;
}

.slogan-wrapper {
    grid-area: stack; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
    align-items: flex-end; 
    height: 100%; 
    position: absolute;
    top: 50%;
    transform: translateY(-50%); 

    right: 0;
    width: 100%;

    z-index: 2;
    padding: 5rem 2rem; 
}

.slogan {
    font-family: var(--font-family-principal);
    font-size: 3rem;
    font-weight: var(--font-weight-light);
    color: var(--cor-primaria);
    line-height: 1.1;
    text-align: left;
    max-width: 70%;
    margin-right: 5%;
    font-variant: small-caps;
}


.secao-hero-sobre .slogan {
    color: #fff; /* Cor branca para contrastar com a imagem, se for o caso */
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}



/* Seção Texto Abaixo da Hero */
.secao-texto-sobre {
    padding: 3rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
    background-color: transparent;
    color: var(--cor-primaria);
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

.secao-texto-sobre p {
    text-align: left;
    width: 100%;
}
.secao-texto-sobre h1,
.secao-texto-sobre h2 {
    text-align: left;
    width: 100%;
}

/* --- Seção Quem Somos --- */

/* Contêiner principal da seção */
.secao-quem-somos {
    padding: 6rem 3rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}


/* Estilo para a linha decorativa abaixo do título */
.secao-quem-somos .linha {
    width: 100%;
    height: 2px;
    background-color: var(--cor-cinza-claro);
    margin: 0 auto 4rem auto;
    border-radius: 2px;
}

/* Contêiner de todos os sócios (para layout flexbox) */
.quem-somos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
}

/* Estilo para cada card de sócio individualmente */
.socio {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Contêiner da foto */
.foto-container {
    width: 280px;
    height: 280px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 1rem;
}

/* Estilo da imagem DENTRO do foto-container */
.foto-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Nome do sócio */
.socio h4 {
    color: var(--cor-secundaria);
    font-weight: var(--font-weight-bold);
    margin-top: 0.5em;
    margin-bottom: 0;
    font-size: 1.4rem;
    letter-spacing: 0.1em;
}

/* Cargo do sócio */
.cargo-socio {
    color: var(--cor-texto-suave);
    font-size: 1.05rem;
    margin-top: 0;
}



/* --- Página Contato --- */
.contato-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 3rem;
    max-width: 80%;
    margin: auto;
    background-color: transparent;
    color: black;
    align-items: center;
    min-height: calc(100vh - var(--header-height) - var(--footer-height));
}

.formulario, .informacoes {
    flex: 1 1 45%;
    text-align: left;
}

.informacoes p {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    color: var(cor-primaria);
    text-align: left;
    gap: 1rem;
}

.informacoes .seta {
    display: inline-flex;  
    align-items: center; 
    justify-content: center; /* Centraliza o SVG horizontalmente dentro do span .seta */
    flex-shrink: 0;        /* Impede que o container da seta encolha em telas pequenas */
    padding: 0;
}

.informacoes .seta svg {
    width: 1.5rem; /* Tamanho da seta, ajuste conforme seu design */
    height: 1.5rem;
    stroke: var(--cor-secundaria);
}


.informacoes .info-label {
    font-weight: bold;
    font-size: 1.05rem;
}


.contact-value {
    display: flex;
    flex-direction: column;
    margin-left: 5px;
}

.contato-link {
    text-decoration: none;
    color: var(--cor-primaria);
}

.informacoes a:visited,
.contato-link:visited {
    text-decoration: none;
    color: #000;
}

.informacoes .separador-numero {
    display: none;
}

input, textarea {
    width: 100%;
    padding: 0.75rem;
    margin-bottom: 1rem;
    border: 1.5px #E0E0E0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 1rem;
}

.formulario .form-submit-btn {
    display: block; /* Para que o botão ocupe sua própria linha */
    width: 100%; /* Para que o botão ocupe a largura total do seu container de formulário */
    margin-top: 20px; /* Espaço acima do botão para separá-lo do campo de mensagem */

    /* Suas propriedades fornecidas */
    background-color: var(--cor-secundaria); /* Cor de fundo (usando sua variável) */
    color: white; /* Cor do texto */
    padding: 0.75rem 2rem; /* Espaçamento interno (altura: 0.75rem, largura: 2rem) */
    border: none; /* Remove qualquer borda padrão */
    cursor: pointer; /* Muda o cursor ao passar o mouse para indicar que é clicável */
    font-weight: bold; /* Texto em negrito */
    font-family: inherit; /* O botão herdará a fonte do elemento pai (body ou outro) */
    border-radius: 4px; /* Cantos arredondados */

    /* Efeitos de transição para uma experiência mais suave no hover/active/disabled */
    transition: background-color 0.3s ease, transform 0.2s ease, opacity 0.3s ease;
}

/* Estilos para quando o mouse passa por cima do botão */
.formulario .form-submit-btn:hover {
    background-color: var(--cor-destaque); /* Exemplo: muda para sua cor de destaque no hover */
    transform: translateY(-2px); /* Pequeno efeito de "levantar" */
}

/* Estilos para quando o botão é clicado */
.formulario .form-submit-btn:active {
    background-color: var(--cor-principal); /* Exemplo: muda para sua cor principal quando ativo */
    transform: translateY(0); /* Retorna à posição original */
}

/* Estilos para quando o botão está desabilitado (ex: durante o envio do formulário) */
.formulario .form-submit-btn:disabled {
    background-color: #cccccc; 
    color: #666666; 
    cursor: not-allowed; 
    opacity: 0.7; 
    transform: none;
}


/* Estilo para o título principal da seção de contato (lado esquerdo) */
.informacoes .contato-titulo-principal {
    font-size: 3rem;
    font-weight: var(--font-weight-bold);
    color: var(--cor-primaria);
    margin-bottom: 0;
    line-height: 1.0;
    text-align: left;
}

/* Estilo para o subtítulo descritivo abaixo do título principal */
.informacoes .contato-subtexto {
    font-size: 1.15rem;
    color: var(--cor-primaria);
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Estilo para o título do formulário (lado direito) */
.formulario .formulario-titulo {
    font-size: 2.2rem;
    font-weight: var(--font-weight-bold);
    color: var(--cor-primaria);
    margin-bottom: 1.5rem;
    text-align: left;
    line-height: 1.1;
}



/* --- Estilos para Mensagens de Erro do Formulário --- */
.error-message {
    color: #e74c3c; /* Uma cor vermelha para erros */
    font-size: 0.9em; /* Tamanho da fonte menor */
    margin-top: 5px; /* Espaço acima da mensagem de erro */
    margin-bottom: 10px; /* Espaço abaixo da mensagem de erro */
    display: block; /* Para que ocupe sua própria linha */
    /* text-align: left; */ /* Se quiser alinhar à esquerda do campo */
}

/* Estilo para campos inválidos */
.formulario input.invalid,
.formulario textarea.invalid {
    border-color: #e74c3c; /* Borda vermelha para o campo inválido */
    box-shadow: 0 0 0 1px #e74c3c; /* Uma sombra sutil para destacar */
}

/* Opcional: Estilo para quando o campo está válido */
.formulario input.valid,
.formulario textarea.valid {
    border-color: #2ecc71; /* Borda verde para campo válido */
}




/* --- Página 'Obrigado' --- */
.thank-you-container {
    display: flex; /* Habilita o Flexbox */
    flex-direction: column; /* Organiza os itens em uma coluna */
    justify-content: center; /* Centraliza os itens verticalmente */
    align-items: center;     /* Centraliza os itens horizontalmente */
    min-height: calc(100vh - var(--header-height) - var(--footer-height, 0px)); /* Garante que o container ocupe a altura restante da tela, ajustando para seu header e footer */
    text-align: center;      /* Centraliza o texto e elementos inline */
    padding: 20px;
    width: 100%; /* Garante que o container ocupe a largura total disponível */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura/altura */
}


.thank-you-container h2 {
    color: var(--cor-cinza-escuro); /* Ou a cor que preferir */
    font-size: 2.5em;
    margin-bottom: 20px;
}
.thank-you-container p {
    color: var(--cor-texto-suave); /* Ou a cor que preferir */
    font-size: 1.1em;
    line-height: 1.6;
    max-width: 600px; /* Para que o texto não se espalhe demais em telas largas */
    margin-bottom: 2rem;
    text-align: center; 
}


.thank-you-container .back-link {
    display: inline-block; /* Mantemos inline-block para que possam ficar lado a lado, se quiserem */
    /* Ajustamos width e margin-top se for diferente do botão ENVIAR */
    /* Geralmente, width: auto ou um max-width é melhor para botões de navegação */
    /* margin-bottom para espaçamento entre eles e o texto */
    margin-bottom: 1rem; /* Espaço abaixo de cada botão, se eles ficarem em linhas separadas no mobile */
    background-color: var(--cor-secundaria); /* Cor de fundo */
    color: white; /* Cor do texto */
    padding: 0.75rem 2rem; /* Espaçamento interno */
    border: none; /* Remove qualquer borda padrão */
    cursor: pointer; /* Muda o cursor */
    font-weight: bold; /* Texto em negrito */
    font-family: inherit; /* Herda a fonte */
    border-radius: 4px; /* Cantos arredondados */

    text-decoration: none; /* Garante que links não tenham sublinhado */
    transition: background-color 0.2s ease; /* Transição suave para o hover */
}

.thank-you-container .back-link:hover {
    background-color: var(--cor-destaque);
}


/* --- Página Projetos --- */
.galeria {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap-reverse;
    justify-content: center;
    gap: 1rem;
    padding: 0 0.5rem;
    max-width: 1200px;
    margin: auto;
    margin-bottom: 3rem; 
}
.galeria-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    width: 100%;
    max-width: 350px;
    height: 262.5px;
}

.galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.galeria-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(208, 209, 171, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.galeria-titulo {
    color: #000;
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    transform: translateY(20px);
    transition: transform 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    margin: 0;
}

.galeria-item:hover .galeria-overlay {
    opacity: 1;
}

.galeria-item:hover .galeria-titulo {
    opacity: 1;
    transform: translateY(0);
}

.galeria-item:hover img {
    transform: scale(1.05);
}

/* Estilos para os botões de filtro */
.filtro-botoes {
    text-align: center;
    margin: 2rem 0;
}

.filtro-btn {
    background-color: transparent;
    color: #666;
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
    margin: 0.5rem;
    cursor: pointer;
    font-weight: var(--font-weight-medium);
    font-family: inherit;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    text-transform: none;
    font-size: 0.85rem;
}

.filtro-btn:hover {
    background-color: #f0f0f0;
    color: #333;
    border-color: #999;
}

.filtro-btn.active {
    background-color: transparent;
    color: #000;
    border-color: #000;
    font-weight: var(--font-weight-semi-bold);
}

/* Regra para esconder os itens que não pertencem à categoria selecionada */
.galeria-item.hidden {
    display: none;
}


/* --- Slideshow (Página 'Index') --- */
.slideshow-container {
    position: relative;
    width: 100%;
    height: calc(100vh - var(--header-height));
    overflow: hidden;
    flex-grow: 1;
}
.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: opacity 1s ease-in-out;
    opacity: 0;
}

.slideshow-container .slide:first-child {
    opacity: 1;
}

#slide1 {
    background-image: url('../imagens/slide1.jpg');
}

#slide2 {
    background-image: url('../imagens/slide2.jpg');
}

#slide3 {
    background-image: url('../imagens/slide3.jpg');
}

.slide-title {
    position: absolute;
    bottom: 3rem;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 2rem;
    text-shadow: 1px 1px 4px #000;
    z-index: 1;
}
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    padding: 1rem;
    color: white;
    font-size: 2rem;
    user-select: none;
    transform: translateY(-50%);
    z-index: 2;
    background: transparent;
    border-radius: 0;
    border: none; 
}
.prev:hover, .next:hover {
    background: transparent;     
    color: rgba(255,255,255,0.7); 
}
.prev {
    left: 1rem;
}
.next {
    right: 1rem;
}

/* --- Rodapé (Footer) --- */
footer {
    display: flex; 
    width: 100%;
    padding: 30px 20px;
    background-color: #000;
    color: #fff;
    border-top: 0px solid #ccc;
    margin-top: 0;
    margin-bottom: 0;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    min-height: 10rem; 

}

.footer-content-wrapper {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-left-column {
    flex: 1; /* Permite que a coluna cresça e ocupe espaço disponível */
    min-width: 250px; /* Largura mínima para quebrar em telas pequenas */
    display: flex;
    flex-direction: column; /* Organiza logo e copyright em coluna */
    align-items: flex-start;
}

.logo-rodape {
    max-width: 150px;
    height: auto;
    margin-bottom: 10px;
    display: block; 
    margin-left: 0; 
    margin-right: auto; 
}

footer p.copyright {
    font-size: 12px;
    color: var(--cor-cinza-claro);
    text-align: left;
    margin: 0;
    line-height: 1.0;
}

.footer-right-column {
    flex: 1;
    min-width: 250px; 
    display: flex; 
    flex-direction: column;
    align-items: flex-start; 
}

footer .contact-info {
    font-size: 14px;
    text-align: left; 
    font-style: normal;
    margin: 0;

}

.social-icons {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.1rem;
    margin: ;
    padding: 0; 

}

.social-icons a {
    color: #FFFFFF;
    transition: color 0.3s ease;
    display: flex;
    align-items: left;
    justify-content: left;
    width: 48px;
    height: 48px;
    background-color: transparent;
    margin: 0; 
    text-decoration: none;
}

.social-icons a:hover {
    color: var(--cor-destaque);
}

.social-icons svg:hover {
    transform: scale(1.1);
}


/* --- Media Queries (Responsividade) --- */
@media (max-width: 768px) {
    header {
        padding: 1rem 1rem;
    }
    main {
        max-width: 100%;
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
    }

    .menu {
        display: none;
    }
    .hamburger {
        display: flex;
    }

    .deslocar-conteudo-direita,
    .deslocar-conteudo-esquerda {
        width: 100%;
        text-align: justify;
        margin: 0 auto;
    }

    /* Rodapé */
   .footer-content-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem; 
        padding-left: 1rem;
        padding-right: 1.5rem;
    }

    .footer-left-column,
    .footer-right-column {
        width: 100%;
        text-align: left;
        align-items: flex-start;
    }

    .footer-left-column .logo-rodape {
        margin-left: 0; 
        margin-right: auto; 
    }

    footer p.copyright,
    .endereco-rodape {
        text-align: left;
    }

    .footer-right-column .social-icons {
        justify-content: flex-start; /
    }

    .footer-right-column p.contact-info {
        justify-content: flex-start; 
        text-align: left;          
        gap: 0.6rem;                
    }



    /* --- Página Sobre --- */
    .secao-hero-sobre {
        min-height: auto;
        justify-content: center;
    }

    .secao-hero-sobre .slogan {
        font-size: 2.2rem;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.1;
        text-align: left;
        margin-right: 0;
    }

    .slogan-wrapper {
        padding: 2.5rem 1.5rem;
        margin-right: 1rem;
        height: 100%;
    }
    .secao-sobre {
        padding: 1.8rem 1.5rem;
    }

    .secao-sobre p {
        font-size: 1rem;
        text-align: left;
    }
    .secao-sobre h1 {
        font-size: 1.8rem;
    }

    .secao-sobre h2 {
        font-size: 1.6rem;
    }
    .secao-texto-sobre {
        padding: 2.5rem 1.5rem;
        text-align: left;
    }
    .secao-texto-sobre p {
        text-align: left;
    }

    .secao-texto-sobre h1 {
        font-size: 1.6rem;
    }

    .subtitulo {
        font-size: 1.6rem;
        gap: 0.8rem;
        margin-top: 3rem;
    }
    .subtitulo img {
        height: 1.6rem;
    }

    /* Seção Quem Somos */
    .secao-quem-somos {
        padding: 6rem 1.5rem;
    }
    .secao-quem-somos .linha {
        margin: 0 auto 4rem auto;
    }
    .quem-somos {
        gap: 1.5rem;
        padding: 0 1rem;
    }
    .foto-container {
        width: 60vw;
        height: 60vw;
        max-width: 250px;
        max-height: 250px;
        margin-bottom: 0.8rem;
    }
    .socio {
        max-width: 220px;
    }

    /* --- Página Contato --- */
    .contato-container {
        flex-direction: column;
        padding: 2rem 1.5rem;
        align-items: center;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .formulario, .informacoes {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0;
        text-align: left;
    }
    .formulario input,
    .formulario textarea {
        width: 100%;
        box-sizing: border-box;
    }

    .formulario button[type="submit"] {
        width: 100%;
        box-sizing: border-box;
        margin: 1rem auto;
    }

    .formulario form {
        width: 100%;
        padding: 0;
        box-sizing: border-box;
    }

    .informacoes p {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 1rem;
        color: #000;
        margin-bottom: 1.2rem;
        gap: 0.6rem; 
    }

    .informacoes .info-label,
    .informacoes .sinal-verde,
    .informacoes .contact-value {
        text-align: left;
    }

    .informacoes .seta svg {
        width: 1.6rem; /* Seta um pouco menor no mobile */
        height: 1.6rem;
    }



    /* --- Página Projetos --- */
    .galeria {
        padding: 1rem 0.5rem;
        gap: 1rem;
    }
    .galeria img {
        max-width: 100%;
    }
}


@media (max-width: 480px) {
    /* --- Página Sobre --- */
    .secao-hero-sobre {
        min-height: auto;
        justify-content: center;
    }

    .hero-conteudo {
        min-height: auto;
        margin-top: 0;
    }

    section.secao-hero-sobre .slogan {
        font-size: 1.6rem;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.1;
        text-align: left;
        margin-right: 0;
    }
    .slogan-wrapper {
        padding: 1.5rem 1rem;
        height: 100%;
    }
    .slogan {
        font-size: 1.8rem;
        margin-top: 0;
        margin-bottom: 0;
        line-height: 1.1;
    }

    .secao-texto-sobre h1 {
        font-size: 1.6rem;
    }

    /* Seção Quem Somos */
    .secao-quem-somos {
        padding: 5rem 1rem;
    }
    .secao-quem-somos .linha {
        margin: 0 auto 3rem auto;
        width: 60px;
        height: 2px;
    }

    .socio h4 {
        font-size: 1.2rem;
        letter-spacing: 0.08em;
        margin-top: 0.4em;
    }

    .cargo-socio {
        font-size: 0.95rem;
    }

    .foto-container {
        width: 180px;
        height: 180px;
        margin-bottom: 0.8rem;
    }
    .socio {
        flex: 1 1 100%;
        max-width: 100%;
        margin: 0 auto 1.5rem auto;
    }
    .socio img {
        max-width: 100%;
    }
    .socio:last-child {
        margin-bottom: 0;
    }
}