/* VARIAVEIS */
:root {
    /* cor principal */
    --main-color: #ffffff;
    /* cor secundária */
    --black: #13131a;

    --border: 0.1rem solid rgba(255, 255, 255, 0.3);
    font-size: 10px;
    font-family: "Roboto", sans-serif;

}

/* ESTILIZAÇÃO GERAL */

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    outline: none;
    text-decoration: none;
    transition: 0.2s linear;

}


/* Estilização do body */


section {
    margin: 0 auto;
    padding: 2rem; /* espaçamento da primeira section, onde esta o texto principal e os caminhões */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99;
    border-bottom: var(--border);
    background-color: #ffffff;
    height: 5rem; /* Altura */
    padding: 0 5%;
    overflow: hidden;  /* evita que os elementos saiam do header */
}

.header section { 
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

/* classe navegação com ( a ) para estilizar ancoras */

.navegacao a {
    margin: 1.5rem;
    font-size: 1.8rem;
    color: #000000;
}

/* interação da navegação */

.navegacao a:hover {
    color: var(--main-color);
    border-bottom: 0.1rem solid var(--main-color);
    padding-bottom: 0.5rem;
    font-size: 2;
}


/* botão de whapsaap */

.whatsapp__header-btn {
    display: none; /* Esconde o botão por padrão */
    align-items: center;
    justify-content: center;
    width: 20rem;
    height: 4rem;
    border-radius: 3.5rem; /* Mais arredondado */
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e com curva elegante */
    border: none;
    outline: none;
    text-decoration: none; /* Garante que o link não tenha underline */
    position: relative; /* Para o efeito de brilho */
    overflow: hidden; /* Para o brilho não vazar */

    
    gap: 2rem;
    
}  

.whatsapp__header-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
    
}

/* --- Estilo Específico do Botão WhatsApp --- */
.whatsapp__header-btn {
    background: linear-gradient(45deg, #25D366 0%, #128C7E 100%);
    color: #ffffff; /* Garante a cor do texto, caso o navegador a mude */
}

/* --- NOVO BLOCO: ESTILOS GERAIS PARA O BOTÃO WHATSAPP --- */

.whatsapp__header-btn:hover {
    transform: translateY(-5px); /* Um leve deslocamento no hover do container */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
    transform: translateY(-8px) scale(1.05); /* Sobe e aumenta mais no hover */
}


/* --- Estilo Base do Botão (WhatsApp) --- */


/* Efeito de brilho no hover dos botões */
.whatsapp__header-btn:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3); /* Brilho branco semi-transparente */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    z-index: 0; /* Abaixo do conteúdo do botão */
}

.whatsapp__header-btn:hover::before {
    width: 200%; /* Aumenta para cobrir o botão */
    height: 200%;
    opacity: 1; /* Torna visível */
}

/* --- Ícones do Botão --- */
.whatsapp__header-btn-icon img {
    width: 30px; /* Ícones um pouco maiores para mais impacto */
    height: 30px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); /* Sombra mais visível no ícone */
    margin-right: 1.2rem; /* Espaçamento entre ícone e texto */
    position: relative; /* Para garantir que fique acima do brilho */
    z-index: 1;
}

/* --- Texto dos Links dentro dos Botões --- */
.whatsapp__header-btn-icon { /* O próprio <a> agora é o texto */
    color: #ffffff;
    font-size: 1.5rem; /* Texto mais legível */
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra mais pronunciada no texto */
    position: relative; /* Para garantir que fique acima do brilho */
    z-index: 1;
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .whatsapp__header-btn {
        display: none; /* Esconde o botão em telas muito pequenas */
        width: 60px;
        height: 50px;
        background-color: none; /* Remove a cor de fundo */
        border: none; /* Remove qualquer borda */
        box-shadow: none; /* Remove qualquer sombra */
    }

    .whatsapp__header-btn-icon {
        font-size: 0;
        color: transparent;
        z-index: 1; /* Coloca o texto atrás do ícone */
    }        
}  

.titulo-mobile {
    display: none;
    font-size: 3rem; /* Tamanho do texto */
    gap: 1rem; /* Espaçamento entre o texto e o ícone */
    color: #ffffff; /* Cor do texto */

}

@media (max-width: 768px) {
    .titulo-mobile {
        display: block; /* Ou display: flex; ou display: inline-block; dependendo de como você quer que ele se comporte */
        text-align: center; /* Exemplo: centraliza o texto */
        font-size: 2.5rem; /* Exemplo: ajusta o tamanho da fonte */
        background-color: transparent; /* Fundo transparente */
    }
}

@media (max-width: 480px) {
    .titulo-mobile {
        display: block; /* Ou display: flex; ou display: inline-block; dependendo de como você quer que ele se comporte */
        text-align: center; /* Exemplo: centraliza o texto */
        font-size: 2.5rem; /* Exemplo: ajusta o tamanho da fonte */
    }
}
/* --- Variáveis de cores (se usarmos --main-color) --- */

:root {
    --main-color: #f0b103; /* Amarelo/Dourado para destaque */
    --text-color: #ffffff; /* Branco para textos principais */
    --dark-blue: #1e1e35;
    --light-blue: #4e72ea;
}

/* --- Body referência do gradiente) --- */

body {
      
    background: linear-gradient(to right, #2c3e50, #1a1a1a);
    min-height: 100vh; /* Garante que o gradiente cubra toda a altura da viewport */
    margin: 0;
    font-family: "Roboto", sans-serif; /* fonte de todos os textos do site */
    overflow-x: hidden; /* Evita scroll horizontal indesejado */
}

/* --- Header --- */
.header {
    background-color: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente para o header */
    padding: 1.5rem 5%; /* Espaçamento interno com percentual para responsividade */
    display: flex;
    justify-content: space-between; 
    align-items: center; /* Alinha itens verticalmente ao centro */
    position: fixed; /* Fixa o header no topo */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Garante que o header fique acima de outros elementos */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Sombra para profundidade */
    backdrop-filter: blur(8px); /* Efeito de blur para um visual moderno (como vidro fosco) */
}

.header .logo img {
    height: 4.5; /* Altura da logo */
    width: auto; /* Mantém a proporção */
    transition: transform 0.3s ease; /* Transição para efeito no hover */
    
}


.header .logo img:hover {
    transform: scale(1.05); /* Pequeno zoom no hover */
    
}

/* --- Navegação Principal header --- */
.navegacao {
    display: flex;
    gap: 1rem; /* Espaçamento entre os itens do menu */
}

.navegacao a {
    color: var(--text-color); /* Cor do texto dos links */
    font-size: 1.7rem;
    font-weight: 500;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.8rem;
    margin-left: 2.5rem; /* Espaçamento à esquerda */
    transition: all 0.3s ease;
    position: relative; /* Para o efeito de underline animado */
}
/* Efeito de underline animado na area de menu de navegação */
.navegacao a::after { /* Efeito de underline animado */
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px;
    background-color: var(--main-color);
    transition: width 0.3s ease;
}

.navegacao a:hover::after,
.navegacao a.active::after { /* `active` para a página atual, se você implementar */
    width: 100%;
}

.navegacao a:hover {
    color: var(--main-color); /* Mudar cor no hover */
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil no hover */
}


/* --- HOME DO SITE --- */
.home-container {
    display: flex;
    flex-direction: row; /* Padrão: conteúdo e imagem lado a lado */
    align-items: center;
    justify-content: space-around;
    min-height: 100vh; /* Ocupa a altura total da viewport */
    padding-top: 8rem; /* Para compensar o header fixo */
    position: relative; /* Necessário para posicionar a imagem de fundo */
    overflow: hidden; /* Garante que nada transborde */
}

/* Conteúdo (texto e botão) */
.home-container .content {
    max-width: 60rem; /* Limita a largura do texto */
    text-align: left; /* Alinha o texto à esquerda */
    z-index: 1; /* Garante que o texto fique acima da imagem */
    padding: 0 2rem; /* Espaçamento interno */
}

.content h3 {
    color: var(--text-color); /* Título principal em branco */
    font-size: 6.5rem; /* Ajuste o tamanho para caber melhor */
    line-height: 1.2; /* Espaçamento entre as linhas */
    margin-bottom: 1.5rem;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Sombra mais forte no título */
}

.content .titulo__destaque {
    color: var(--main-color); /* Cor de destaque para a palavra chave */
    font-weight: bold;
}

.content p {
    color: var(--text-color); /* Texto secundário em cinza claro */
    font-size: 2.2rem; /* Tamanho do parágrafo */
    font-weight: 200;
    line-height: 1.6;
    padding: 1rem 0;
    margin-bottom: 3rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Botão "Saiba Mais" */
.btn {
    background: linear-gradient(90deg, var(--main-color), #ffcc00); /* Gradiente para o botão */
    color: var(--dark-blue); /* Texto em azul escuro para contraste */
    padding: 1.8rem 5rem; /* Aumenta o padding */
    font-size: 2rem; /* Aumenta o tamanho da fonte */
    cursor: pointer;
    margin-top: 2rem;
    display: inline-block;
    border-radius: 3rem; /* Mais arredondado */
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease-in-out;
}

.btn:hover {
    transform: translateY(-5px) scale(1.05); /* Efeito de elevação e leve aumento */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Sombra maior no hover */
    filter: brightness(1.1); /* Leve brilho no hover */
}

/* Imagem da Portada (Hyundai HR) */
.img-portada {
    width: 55%; /* Ocupa 55% da largura do container home */
    max-width: 800px; /* Limita o tamanho máximo da imagem */
    height: auto; /* Mantém a proporção */
    object-fit: contain; /* Garante que a imagem se ajuste sem cortar */
    margin-right: 3%; /* move a imagem para para os lados */
    transition: transform 0.9s ease; /* Transição para o hover */
}

.img-portada:hover {
    transform: scale(1.02); /* Pequeno zoom no hover */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
}


/* --- Media Queries para Responsividade --- */

/* Telas grandes (desktops maiores) */
@media (min-width: 1400px) {
    .home-container .content {
        max-width: 70rem;
    }
    .content h3 {
        font-size: 6rem;
    }
    .content p {
        font-size: 2.5rem;
    }
    .header .logo img {
        height: 70px;
    }
    .navegacao a {
        font-size: 2rem;
    }
    .header-btn {
        width: 180px;
        height: 50px;
    }
    .header-btn a {
        font-size: 1.8rem;
    }
}


/* Tablets e laptops pequenos (768px - 1024px) */

@media (max-width: 1024px) {
    .header {
        padding: 1rem 3%;
    }
    .header .logo img {
        height: 50px;
    }
    .navegacao {
        gap: 2rem;
    }
    .navegacao a {
        font-size: 1.6rem;
    }
    .header-btn {
        width: 140px;
        height: 40px;
    }
    .header-btn img {
        width: 20px;
        height: 20px;
    }
    .header-btn a {
        font-size: 1.4rem;
    }

    .home-container {
        flex-direction: column; /* Empilha o conteúdo e a imagem */
        text-align: center;
        padding-top: 10rem; /* Mais padding para o header */
        justify-content: center; /* Centraliza o conteúdo verticalmente */
    }

    .home-container .content {
        max-width: 90%; /* Ocupa mais largura */
        margin-bottom: 4rem; /* Espaçamento entre texto e imagem */
    }

    .content h3 {
        font-size: 5rem;
    }
    .content p {
        font-size: 2rem;
    }
    .btn {
        padding: 1.5rem 4rem;
        font-size: 1.8rem;
    }
    .img-portada {
        width: 80%; /* Aumenta a imagem para ocupar mais espaço */
        margin-right: 0; /* Remove o margin-right negativo */
    }
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    
    .home-container {
        flex-direction: column;
        min-height: 80vh;
        padding-top: 8rem;
        justify-content: flex-start;
        align-items: center;
        position: relative;
    }

    .home-section {
        width: 100%;
        min-height: auto;
        padding: 2rem 1rem;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        text-align: center;
        z-index: 2;
    }

    .home-section .content {
        width: 100%;
        max-width: 90%;
        margin-top: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }

    .home-section .content h3 {
        font-size: 3rem;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    .home-section .content p {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
        padding: 0 1rem;
    }

    .home-section .content .btn {
        font-size: 1.7rem;
        padding: 1.2rem 2.5rem;
        margin-top: 0;
    }

    .img-portada {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 500px;
        height: auto;
        opacity: 0.5;
        z-index: 1;
    }
    /* --- FIM DO NOVO CÓDIGO PARA 767px --- */
       
    .header {
        padding: 1rem 2%;
    }

    .navegacao {
        /* Esconder navegação em mobile e usar um menu hambúrguer, se for o caso */
        display: none; /* Ou implemente um menu hambúrguer aqui */
    }

    .header .logo img {
        height: 45px;
    }

    .header-btn {
        width: 120px;
        height: 38px;
    }
    .header-btn img {
        width: 18px;
        height: 18px;
    }
    .header-btn a {
        font-size: 1.2rem;
    }

    .home-container {
        padding-top: 8rem; /* Ajuste para o header menor */
    }

    .content h3 {
        font-size: 4rem;
    }

    .content p {
        font-size: 1.6rem;
        padding: 0.5rem 0;
    }

    .btn {
        padding: 1.2rem 3rem;
        font-size: 1.6rem;
    }

    .img-portada {
        width: 95%; /* Quase total da largura da tela */
    }
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .content h3 {
        font-size: 3rem;
    }

    .content p {
        font-size: 1.4rem;
    }

    .home-section .content h3 {
        font-size: 2.8rem;
    }

    .home-section .content p {
        font-size: 1.5rem;
    }

    .home-section .content .btn {
        font-size: 1.6rem;
        padding: 1rem 2rem;
    }

    .img-portada {
        
        opacity: 1;
        transform: translateX(-50%) scale(1.05); /* Leve zoom para destacar a imagem */
    
    }
    /* --- FIM DO NOVO CÓDIGO PARA 480px --- */
}


/* Seção "Sobre Nós" */
.sobre-nos {
    padding: 6rem 2rem; /* Espaçamento interno */
    text-align: center; /* Centraliza o título e o conteúdo em geral */
}

/* Título da seção */
.sobre-nos .title {
    color: var(--text-color); 
    font-size: 5rem;
    margin-bottom: 5rem; /* Espaçamento abaixo do título */
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.1rem;
}

.sobre-nos .title span {
    color: var(--main-color); /* A cor de destaque para a palavra "Nós" */
    text-transform: uppercase;
}

/* Efeito de underline animado para o título da seção */

.section-title::after {
    content: '';
    position: absolute;
    left: 50%; /* Começa no centro */
    transform: translateX(-50%); /* Ajusta para centralizar */
    bottom: -10px; /* Posição abaixo do texto */
    width: 60%; /* Largura do underline */
    height: 4px;
    background: linear-gradient(to right, var(--main-color), #ffcc00); /* Gradiente no underline */
    border-radius: 2px;
    opacity: 0; /* Começa invisível */
    transition: all 0.4s ease-out; /* Transição suave */
}

/* Anima o underline quando a seção é hover */
.sobre-nos:hover .section-title::after,
.servicos:hover .section-title::after,
.galeria:hover .section-title::after,
.formas-pagamento:hover .section-title::after,
.contato .section-title::after { /* Anima o underline quando a seção é hover */
    opacity: 1; /* Torna visível */
    width: 80%; /* Aumenta a largura */
}


.destaquenomeda-oficina {
    color: var(--main-color); /* A cor de destaque no nome da empresa */
    font-weight: bold; /* Deixa o texto em negrito */
}
/* Container da Imagem e Conteúdo (o .row) */
.row.about-row { /* Usamos .row.about-row para ser mais específico */
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem a linha */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Alinha os itens verticalmente ao centro */
    gap: 4rem; /* Espaçamento entre a imagem e o texto */
    max-width: 1200px; /* Limita a largura máxima do container */
    margin: 0 auto; /* Centraliza o container na página */
}

/* Container da Imagem */
.container__image__sobre {
    flex: 1 1 45rem; /* Flex-grow, flex-shrink, flex-basis: 45rem de largura base */
    min-width: 300px; /* Largura mínima para a imagem */
    height: 400px; /* Altura fixa para a imagem */
    border-radius: 1.5rem; /* Bordas arredondadas para o container da imagem */
    overflow: hidden; /* Garante que a imagem respeite o border-radius */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4); /* Sombra para o container */
    border: 3px solid rgba(255, 255, 255, 0.2); /* Borda sutil */
    transition: all 0.4s ease-in-out; /* Transição para o hover */
}

.container__image__sobre:hover {
    transform: scale(1.02) rotate(1deg); /* Leve zoom e rotação no hover */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); /* Sombra mais intensa */
}

.container__image__sobre img {
    width: 100%; /* A imagem preenche o container */
    height: 100%; /* A imagem preenche o container */
    object-fit: cover; /* Corta a imagem para preencher sem distorcer */
    display: block; /* Remove o espaço extra abaixo da imagem */
}

/* Conteúdo da Seção "Sobre Nós" (texto e botão) */
.content.about-content { /* Usamos .content.about-content para ser mais específico */
    flex: 1 1 50rem; /* Flex-grow, flex-shrink, flex-basis: 50rem de largura base */
    text-align: justify; /* Texto alinhado à esquerda */
    padding: 2rem; /* Espaçamento interno */
    background-color: rgba(0, 0, 0, 0.3); /* Fundo semi-transparente para o bloco de texto */
    border-radius: 1.5rem; /* Bordas arredondadas */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3); /* Sombra */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda muito sutil */
}

.content.about-content p {
    font-size: 2rem; /* Tamanho da fonte do parágrafo */
    color: #e0e0e0; /* Um branco acinzentado */
    line-height: 1.7; /* Altura da linha para melhor legibilidade */
    padding: 1rem 0;
    margin-bottom: 2rem; /* Espaçamento abaixo dos parágrafos */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Sombra sutil no texto */
}


/* --- Media Queries para Responsividade --- */

/* Tablets e laptops pequenos (768px - 1024px) */
@media (max-width: 1024px) {
    .sobre-nos {
        padding: 5rem 1.5rem;
    }

    .sobre-nos .title {
        font-size: 4rem;
        margin-bottom: 4rem;
    }

    .row.about-row {
        flex-direction: column; /* Empilha imagem e texto */
        gap: 3rem;
    }

    .container__image__sobre {
        flex: 1 1 auto; /* Permite que ocupe a largura disponível */
        width: 90%; /* Ocupa 90% da largura em telas menores */
        height: 350px; /* Ajusta a altura */
    }

    .content.about-content {
        flex: 1 1 auto; /* Permite que ocupe a largura disponível */
        width: 90%; /* Ocupa 90% da largura em telas menores */
        padding: 1.5rem;
    }

    .content.about-content p {
        font-size: 1.8rem;
    }
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    .sobre-nos {
        padding: 4rem 1rem;
    }

    .sobre-nos .title {
        font-size: 3.5rem;
        margin-bottom: 3rem;
    }

    .container__image__sobre {
        height: 300px;
        border-radius: 1rem;
    }

    .content.about-content p {
        font-size: 1.6rem;
    }

    .btn { /* Ajuste do botão para mobile se ele for muito grande */
        padding: 1.2rem 3rem;
        font-size: 1.6rem;
    }
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .sobre-nos .title {
        font-size: 3rem;
    }
    .content.about-content p {
        font-size: 1.5rem;
    }
}


/* --- Estilos da Seção "Serviços" --- */
.servicos {
    padding: 8rem 2rem; /* Espaçamento interno generoso */
    text-align: center; /* Centraliza o conteúdo geral */
    position: relative; /* Para possíveis pseudo-elementos ou backgrounds */
}

/* Título principal da Seção */
.section-title { 
    color: var(--text-color); /* Branco para o título */
    font-size: 5rem;
    margin-bottom: 3rem; /* Espaçamento abaixo do título */
    text-shadow: 0px 4px 6px rgba(0, 0, 0, 0.4);
    letter-spacing: 0.1rem;
    position: relative;
    display: inline-block; /* Para o underline animado */
}






/* Introdução da Seção de Serviços */
.servicos-intro {
    max-width: 900px;
    margin: 0 auto 5rem auto; /* Centraliza e adiciona espaço abaixo */
    padding: 0 1rem;
}

.pergunta-cliente-subtitulo { 
    color: var(--main-color); /* Cor de destaque */
    font-size: 3.8rem; /* Tamanho da fonte */
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.3;
}

.pergunta-cliente-texto { 
    color: #e0e0e0;
    font-size: 2rem;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    text-align: justify; /* Alinha o texto para melhor legibilidade */
}

/* Container dos Cards de Serviço */
.servicos__container {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem a linha */
    justify-content: center; /* Centraliza os cards */
    gap: 4rem; /* Espaçamento entre os cards */
    max-width: 1400px; /* Largura máxima para o container dos cards */
    margin: 0 auto; /* Centraliza o container */
}

/* Estilo de cada Card de Serviço */
.servicos__card {
    flex: 1 1 350px; /* Flex-grow, flex-shrink, flex-basis: largura base de 350px */
    max-width: 400px; /* Garante que não fiquem muito largos em telas grandes */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente para o card */
    border-radius: 2rem; /* Bordas arredondadas */
    padding: 3rem; /* Espaçamento interno */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Sombra mais intensa para destaque */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e com curva elegante */
    display: flex; /* Para alinhar o título e a lista */
    flex-direction: column; /* Conteúdo em coluna */
    align-items: flex-start; /* Alinha texto à esquerda dentro do card */
    text-align: left; /* Garante que o texto esteja alinhado à esquerda */
}

.servicos__card:hover {
    transform: translateY(-10px) scale(1.03); /* Eleva e aumenta o card no hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* Sombra ainda maior no hover */
    border-color: var(--main-color); /* Borda destaca no hover */
}

/* Título de cada Card de Serviço */
.servicos__card__titulo { /* Alterado de servicos__container__titulo__lista */
    color: var(--main-color); /* Cor de destaque */
    font-size: 3rem; /* Tamanho do título */
    margin-bottom: 2.5rem; /* Espaçamento abaixo do título */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    width: 100%; /* Ocupa a largura total do card */
    text-align: center; /* Centraliza o título dentro do card */
}

/* Lista de Serviços dentro do Card */
.servicos__card__lista { /* Alterado de servicos__container__lista */
    list-style: none; /* Remove os marcadores de lista padrão */
    padding: 0; /* Remove o padding padrão da lista */
    margin: 0; /* Remove a margem padrão da lista */
    color: #e0e0e0; /* Cor do texto da lista */
    font-size: 1.8rem;
    line-height: 1.8; /* Espaçamento entre os itens */
    width: 100%; /* Garante que a lista ocupe toda a largura */
    text-align: left; /* Alinha o texto dos itens à esquerda */
    height: 100%; /* Permite que a lista se expanda */
}

.servicos__card__lista li {
    position: relative;
    padding-left: 2.5rem; /* Espaço para o ícone de check */
    margin-bottom: 1rem; /* Espaçamento entre os itens da lista */
}

.servicos__card__lista li::before {
    content: '\2713'; /* Código Unicode para um "check mark" (✓) */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--main-color); /* Cor do check */
    font-size: 2rem;
    font-weight: bold;
}


/* Media Queries para Responsividade */

/* Tablets e laptops pequenos (768px - 1024px) */
@media (max-width: 1024px) {
    .servicos {
        padding: 6rem 1.5rem;
    }

    .section-title {
        font-size: 4.5rem;
        margin-bottom: 2.5rem;
    }

    .pergunta-cliente-subtitulo {
        font-size: 3.2rem;
    }

    .pergunta-cliente-texto {
        font-size: 1.8rem;
    }

    .servicos__container {
        gap: 3rem;
    }

    .servicos__card {
        flex: 1 1 300px; /* Largura base ajustada */
        max-width: 350px;
        padding: 2.5rem;
    }

    .servicos__card__titulo {
        font-size: 2.8rem;
    }

    .servicos__card__lista {
        font-size: 1.7rem;
    }
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    .servicos {
        padding: 5rem 1rem;
    }

    .section-title {
        font-size: 3.8rem;
        margin-bottom: 2rem;
    }
    .section-title::after {
        width: 70%;
    }

    .pergunta-cliente-subtitulo {
        font-size: 2.8rem;
        margin-bottom: 1.5rem;
    }

    .pergunta-cliente-texto {
        font-size: 1.6rem;
    }

    .servicos__container {
        gap: 2.5rem;
    }

    .servicos__card {
        flex: 1 1 90%; /* Ocupa quase toda a largura em mobile */
        max-width: 90%; /* Garante que não transborde */
        padding: 2rem;
    }

    .servicos__card__titulo {
        font-size: 2.5rem;
        margin-bottom: 2rem;
    }

    .servicos__card__lista {
        font-size: 1.6rem;
    }

    .servicos__card__lista li {
        padding-left: 2rem;
    }

    .servicos__card__lista li::before {
        font-size: 1.8rem;
    }
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .section-title {
        font-size: 3.2rem;
    }

    .pergunta-cliente-subtitulo {
        font-size: 2.4rem;
    }

    .pergunta-cliente-texto {
        font-size: 1.5rem;
    }

    .servicos__card__titulo {
        font-size: 2.2rem;
    }

    .servicos__card__lista {
        font-size: 1.5rem;
    }
}


/* --- Estilos da Seção "Formas de Pagamento" --- */
.formas-pagamento {
    padding: 8rem 2rem; /* Espaçamento interno generoso */
    text-align: center; /* Centraliza o conteúdo geral */
    position: relative;
    /* O gradiente do body será visível por trás dos elementos semi-transparentes */
}

/* O .section-title já tem estilo global, mas podemos ajustar o span */
.formas-pagamento .section-title span {
    color: var(--main-color); /* A cor de destaque para a palavra "Pagamento" */
}

/* Intro da Seção de Pagamento */
.pagamento-intro {
    max-width: 800px;
    margin: 0 auto 5rem auto; /* Centraliza e adiciona espaço abaixo */
    padding: 0 1rem;
}

.pagamento-intro p {
    color: #e0e0e0; /* Um branco acinzentado */
    font-size: 2rem;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Container dos Cards de Pagamento */
.pagamento-cards-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards quebrem a linha */
    justify-content: center; /* Centraliza os cards */
    gap: 3.5rem; /* Espaçamento entre os cards */
    max-width: 1200px; /* Largura máxima para o container */
    margin: 0 auto; /* Centraliza o container */
}

/* Estilo Base de cada Card de Pagamento */
.pagamento-card {
    flex: 1 1 300px; /* Flex-grow, flex-shrink, flex-basis: largura base de 300px */
    max-width: 380px; /* Limita a largura para que não fiquem muito grandes */
    background-color: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente */
    border-radius: 2rem; /* Bordas arredondadas */
    padding: 3rem; /* Espaçamento interno */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Sombra intensa */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e elegante */
    display: flex; /* Para centralizar o conteúdo verticalmente */
    flex-direction: column; /* Conteúdo em coluna (ícone, título, descrição) */
    align-items: center; /* Centraliza horizontalmente o conteúdo do card */
    text-align: center; /* Centraliza o texto dentro do card */
    position: relative; /* Para possíveis efeitos de animação no hover */
    overflow: hidden; /* Garante que a borda no hover não escape */
}

/* Efeito de Bordas Coloridas no Hover para cada Card */
.pagamento-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2rem;
    pointer-events: none; /* Não interfere com cliques */
    opacity: 0; /* Começa invisível */
    transition: all 0.4s ease-out;
}

.pagamento-card.pix::before {
    border: 4px solid #28C76F; /* Verde Pix */
}
.pagamento-card.debito::before {
    border: 4px solid #007bff; /* Azul Débito */
}
.pagamento-card.credito::before {
    border: 4px solid #28C76F; /* Roxo Crédito */
}

.pagamento-card:hover::before {
    opacity: 1; /* Mostra a borda colorida no hover */
}


.pagamento-card:hover {
    transform: translateY(-10px) scale(1.03); /* Eleva e aumenta o card no hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* Sombra ainda maior no hover */
}

/* Estilo dos Ícones/Imagens dentro dos Cards */
.pagamento-card img {
    width: 80px; /* Tamanho dos ícones */
    height: 80px;
    margin-bottom: 2rem;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); /* Sombra para o ícone */
    transition: transform 0.3s ease;
}

.pagamento-card:hover img {
    transform: rotateY(15deg) scale(1.1); /* Animação no ícone ao passar o mouse no card */
}

/* Título de cada Card de Pagamento */
.pagamento-card-titulo {
    color: var(--main-color); /* Cor de destaque */
    font-size: 2.8rem;
    margin-bottom: 1rem;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Parágrafo de descrição de cada Card */
.pagamento-card p {
    color: #c0c0c0; /* Cinza claro para a descrição */
    font-size: 1.8rem;
    line-height: 1.6;
}


/* --- Media Queries para Responsividade --- */

/* Tablets e laptops pequenos (768px - 1024px) */
@media (max-width: 1024px) {
    .formas-pagamento {
        padding: 6rem 1.5rem;
    }

    .pagamento-intro p {
        font-size: 1.8rem;
    }

    .pagamento-cards-container {
        gap: 3rem;
    }

    .pagamento-card {
        flex: 1 1 280px; /* Ajusta largura base */
        max-width: 320px;
        padding: 2.5rem;
    }

    .pagamento-card img {
        width: 70px;
        height: 70px;
        margin-bottom: 1.5rem;
    }

    .pagamento-card-titulo {
        font-size: 2.5rem;
    }

    .pagamento-card p {
        font-size: 1.6rem;
    }
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    .formas-pagamento {
        padding: 5rem 1rem;
    }

    .pagamento-intro p {
        font-size: 1.6rem;
    }

    .pagamento-cards-container {
        gap: 2.5rem;
    }

    .pagamento-card {
        flex: 1 1 90%; /* Ocupa quase toda a largura em mobile */
        max-width: 90%;
        padding: 2rem;
    }

    .pagamento-card img {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }

    .pagamento-card-titulo {
        font-size: 2.2rem;
    }

    .pagamento-card p {
        font-size: 1.5rem;
    }
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .pagamento-intro p {
        font-size: 1.5rem;
    }

    .pagamento-card-titulo {
        font-size: 2rem;
    }

    .pagamento-card p {
        font-size: 1.4rem;
    }
}

/* CONTEUDO GALERIA */

/* --- Estilos da Seção "Galeria" --- */
.galeria {
    padding: 8rem 2rem; /* Espaçamento interno generoso */
    text-align: center; /* Centraliza o conteúdo geral */
    position: relative;
}

/* O .section-title já tem estilo global, mas aqui o span é para "Galeria" */
.galeria .section-title span {
    color: var(--text-color); /* Mantém o texto em branco */
    
}


/* Introdução da Galeria */
.galeria-intro {
    max-width: 800px;
    margin: 0 auto 5rem auto; /* Centraliza e adiciona espaço abaixo */
    padding: 0 1rem;
}

.galeria-intro p {
    color: #e0e0e0; /* Um branco acinzentado para o texto */
    font-size: 2rem;
    line-height: 1.7;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}


/* Container dos Vídeos da Galeria */
.galeria-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os vídeos quebrem a linha */
    justify-content: center; /* Centraliza os vídeos */
    gap: 3.5rem; /* Espaçamento entre os vídeos */
    max-width: 1400px; /* Largura máxima para o container dos vídeos */
    margin: 0 auto; /* Centraliza o container */
}

/* Wrapper para cada Vídeo (Controla o card visual) */

.galeria-video-wrapper {
    flex: 1 1 00px; /* Flex-grow, flex-shrink, flex-basis: largura base de 300px */
    max-width: 400px; /* Limita a largura máxima do wrapper */
    height: 400px; /* Altura fixa para o wrapper do vídeo */
    /* Você pode ajustar a altura conforme a proporção dos seus vídeos */

    background-color: rgba(0, 0, 0, 0.4); /* Fundo semi-transparente */
    border-radius: 1.5rem; /* Bordas arredondadas */
    padding: 1.5rem; /* Espaçamento interno para o vídeo não colar na borda */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5); /* Sombra intensa */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Borda sutil */
    backdrop-filter: blur(5px); /* Efeito de vidro fosco */
    overflow: hidden; /* Garante que o vídeo respeite o border-radius */
    display: flex; /* Para centralizar o vídeo dentro do wrapper */
    justify-content: center;
    align-items: center;
    position: relative; /* Para a borda animada no hover */

    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e elegante */
}

/* Efeito de Borda Animada no Hover para o Wrapper do Vídeo */
.galeria-video-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.5rem;
    border: 4px solid var(--main-color); /* Cor da borda animada */
    pointer-events: none; /* Não interfere com os cliques */
    opacity: 0; /* Começa invisível */
    transform: scale(0.9); /* Começa um pouco menor */
    transition: all 0.4s ease-out;
}

.galeria-video-wrapper:hover::before {
    opacity: 1; /* Torna visível */
    transform: scale(1); /* Expande para o tamanho normal */
}

.galeria-video-wrapper:hover {
    transform: translateY(-10px) scale(1.03); /* Eleva e aumenta o card no hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6); /* Sombra ainda maior no hover */
}

/* Estilo do Elemento Vídeo em si */
.galeria-video-item {
    width: 100%; /* Ocupa a largura total do wrapper */
    height: 100%; /* Ocupa a altura total do wrapper */
    object-fit: cover; /* Garante que o vídeo preencha o espaço sem distorcer, cortando se necessário */
    border-radius: 1rem; /* Bordas levemente arredondadas para o vídeo */
}    

/* --- Media Queries para Responsividade --- */

/* Tablets e laptops pequenos (768px - 1024px) */
@media (max-width: 1024px) {
    .galeria {
        padding: 6rem 1.5rem;
    }

    .section-title {
        font-size: 4.5rem;
    }

    .galeria-intro p {
        font-size: 1.8rem;
    }

    .galeria-container {
        gap: 3rem;
    }

    .galeria-video-wrapper {
        flex: 1 1 280px; /* Ajusta largura base */
        max-width: 350px;
        height: 220px; /* Ajusta altura */
        padding: 1.2rem;
    }
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    .galeria {
        padding: 5rem 1rem;
    }

    .section-title {
        font-size: 3.8rem;
    }

    .galeria-intro p {
        font-size: 1.6rem;
    }

    .galeria-container {
        gap: 2.5rem;
    }

    .galeria-video-wrapper {
        flex: 1 1 90%; /* Ocupa quase toda a largura em mobile */
        max-width: 90%;
        height: 200px; /* Altura menor para mobile */
        padding: 1rem;
        border-radius: 1rem;
    }

    .galeria-video-wrapper::before {
        border-radius: 1rem;
    }
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .section-title {
        font-size: 3.2rem;
    }

    .galeria-intro p {
        font-size: 1.5rem;
    }

    .galeria-video-wrapper {
        height: 250px;
    }
}

/* --- Estilos Gerais da Seção de Contato --- */
.contato {
    padding: 8rem 2rem; 
    text-align: center;
    position: relative;
}

/* --- Título da Seção (usando a classe global .section-title) --- */
/* O .section-title já tem cor e sombra definidas globalmente. */
.contato .section-title {
    color: var(--text-color); /* Mantém o texto principal do título em branco */
    /* Garante que o efeito de underline animado do section-title global funcione */
}

.contato .section-title span {
    color: var(--main-color); 
}

/* --- Texto da Seção --- */
.contato__conteudo {
    color: #e0e0e0;
    font-size: 2rem;
    line-height: 1.7; /* Altura da linha para melhor legibilidade */
    max-width: 800px;
    margin: 0 auto 5rem auto; /* Centraliza e adiciona margem inferior */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Sombra sutil no texto */
}

/* --- Container Principal (Botões e Mapa) --- */
.contato__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centraliza para melhor responsividade */
    align-items: center; /* Alinha os itens ao centro */
    gap: 4rem; /* Espaçamento entre os blocos */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Container dos Botões --- */
.contato__container__botoes {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Espaçamento ligeiramente maior entre os botões */
    align-items: center;
    /* Adiciona um background sutil e sombra para agrupar os botões visualmente */
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1.5rem;
    padding: 3rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s ease-in-out;
}

.contato__container__botoes:hover {
    transform: translateY(-5px); /* Um leve deslocamento no hover do container */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6);
}

/* --- Estilo Base dos Botões (WhatsApp e Instagram) --- */

.contato__btn { 
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px; /* largura */
    height: 65px; /* altura */
    border-radius: 3.5rem; /* Mais arredondado */
    cursor: pointer;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e com curva elegante */
    border: none;
    outline: none;
    text-decoration: none; /* Garante que o link não tenha underline */
    position: relative; /* Para o efeito de brilho */
    overflow: hidden; /* Para o brilho não vazar */
}

/* Efeito de brilho no hover dos botões */
.contato__btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3); /* Brilho branco semi-transparente */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
    z-index: 0; /* Abaixo do conteúdo do botão */
}

.contato__btn:hover::before {
    width: 200%; /* Aumenta para cobrir o botão */
    height: 200%;
    opacity: 1; /* Torna visível */
}

.contato__btn:hover {
    transform: translateY(-8px) scale(1.05); /* Sobe e aumenta mais no hover */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.5); /* Sombra ainda maior */
    z-index: 1; /* Garante que o botão hoverizado fique por cima */
}


/* --- Estilo Específico do Botão WhatsApp --- */
.contato__btn.whatsapp {
    background: linear-gradient(45deg, #25D366 0%, #128C7E 100%);
    color: #ffffff; /* Garante a cor do texto, caso o navegador a mude */
}

/* --- Estilo Específico do Botão Instagram --- */
.contato__btn.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #ffffff; /* Garante a cor do texto, caso o navegador a mude */
}

/* --- Ícones dos Botões --- */
.contato__btn img {
    width: 36px; /* Ícones um pouco maiores para mais impacto */
    height: 36px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); /* Sombra mais visível no ícone */
    margin-right: 1.2rem; /* Espaçamento entre ícone e texto */
    position: relative; /* Para garantir que fique acima do brilho */
    z-index: 1;
}

/* --- Texto dos Links dentro dos Botões --- */
.contato__btn { /* O próprio <a> agora é o texto */
    color: #ffffff;
    font-size: 2.4rem; /* Texto maior e mais legível */
    font-weight: bold;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* Sombra mais pronunciada no texto */
    position: relative; /* Para garantir que fique acima do brilho */
    z-index: 1;
}

/* --- Container do Mapa --- */
.contato__container__mapa {
    flex: 1 1 500px; /* Permite que o mapa tenha uma largura base maior */
    height: 400px; /* Altura padrão para o mapa */

    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 2rem; /* Bordas mais arredondadas */
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* Sombra mais intensa */
    border: 3px solid var(--main-color); /* Borda mais destacada com a cor principal */
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transição suave e elegante */
}

.contato__container__mapa:hover {
    transform: scale(1.02); /* Leve zoom no mapa ao passar o mouse */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7); /* Sombra ainda mais intensa */
    border-color: var(--text-color); /* Muda a cor da borda no hover para o branco */
}

/* --- Estilo do Iframe do Mapa --- */
.contato__mapa__iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* O border-radius será aplicado ao container do mapa para um efeito mais limpo */
}

/* --- Media Queries para Responsividade --- */
@media (max-width: 1024px) {
    .contato {
        padding: 6rem 1.5rem;
    }

    .contato .section-title {
        font-size: 4.5rem;
    }

    .contato__conteudo {
        font-size: 1.8rem;
    }

    .contato__container {
        gap: 3rem;
    }

    .contato__container__botoes {
        padding: 2.5rem;
    }

    .contato__btn {
        width: 220px;
        height: 60px;
        font-size: 2.2rem;
    }

    .contato__btn img {
        width: 32px;
        height: 32px;
    }

    .contato__container__mapa {
        flex: 1 1 400px; /* Ajusta largura base do mapa */
        height: 350px; /* Altura ajustada */
    }
}

@media (max-width: 768px) {
    .contato {
        padding: 5rem 1rem;
    }

    .contato .section-title {
        font-size: 3.8rem;
    }

    .contato__conteudo {
        font-size: 1.6rem;
        margin-bottom: 3.5rem;
    }

    .contato__container {
        flex-direction: column; /* Empilha os blocos */
        align-items: center;
        gap: 3.5rem; /* Espaçamento entre os blocos empilhados */
    }

    .contato__container__botoes {
        width: 90%; /* Ocupa mais largura em mobile */
        padding: 2.5rem 1.5rem; /* Ajusta padding para mobile */
    }

    .contato__btn {
        width: 90%; /* Botões ocupam mais largura */
        max-width: 280px; /* Limita a largura máxima para não ficarem gigantes */
        height: 55px;
        font-size: 2rem;
    }

    .contato__btn img {
        width: 28px;
        height: 28px;
        margin-right: 1rem;
    }

    .contato__container__mapa {
        width: 90%; /* Mapa ocupa 90% da largura */
        height: 300px;
        border-radius: 1.5rem;
    }

    .contato__container__mapa:hover {
        transform: none; /* Remove o zoom no hover para mobile */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6); /* Mantém a sombra padrão */
    }
}

@media (max-width: 480px) {
    .contato {
        padding: 4rem 1rem;
    }

    .contato .section-title {
        font-size: 3.2rem;
    }

    .contato__conteudo {
        font-size: 1.5rem;
    }

    .contato__btn {
        font-size: 1.8rem;
    }
}

/* FOOTER */

/* --- Estilos do Rodapé (Footer) --- */
.footer {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7)); /* Fundo escuro semi-transparente */
    color: #e0e0e0; /* Cor de texto padrão para o rodapé */
    padding: 6rem 2rem 3rem; /* Espaçamento interno (topo, lados, baixo) */
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Linha sutil no topo */
    text-align: center; /* Centraliza o conteúdo geral */
    position: relative;
    z-index: 10; /* Garante que o footer fique acima de outros elementos se houver sobreposição */
}

.footer-container {
    display: flex;
    flex-wrap: wrap; /* Permite que as colunas quebrem a linha */
    justify-content: space-around; /* Distribui as colunas com espaço */
    align-items: flex-start; /* Alinha as colunas no topo */
    gap: 4rem; /* Espaçamento entre as colunas do rodapé */
    max-width: 1400px;
    margin: 0 auto 5rem; /* Centraliza e adiciona margem abaixo */
    padding-bottom: 3rem; /* Padding interno para separar do footer-bottom */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08); /* Linha sutil na parte inferior do container */
}

/* Estilo para cada coluna do rodapé */
.footer-logo,
.footer-links,
.footer-contact,
.footer-social {
    flex: 1 1 250px; /* Flex-grow, flex-shrink, flex-basis: largura base */
    padding: 2rem;
    background-color: rgba(255, 255, 255, 0.05); /* Fundo muito sutil para cada bloco */
    border-radius: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(3px); /* Efeito blur mais leve */
    border: 1px solid rgba(255, 255, 255, 0.05);
    text-align: left; /* Alinha o texto à esquerda dentro de cada coluna */
    transition: all 0.3s ease-in-out;
}

.footer-logo:hover,
.footer-links:hover,
.footer-contact:hover,
.footer-social:hover {
    transform: translateY(-5px); /* Leve elevação no hover */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Logo e Nome da Empresa */
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha a logo e o texto à esquerda */
    text-align: left;
    min-width: 200px; /* Garante que a logo não fique muito pequena */
}

.footer-logo img {
    width: 80px; /* Tamanho da logo */
    height: 80px;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}

.footer-logo h3 {
    font-size: 2.8rem;
    color: var(--text-color);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.footer-logo h3 span {
    color: var(--main-color); /* Destaque para "Irmãos" */
    text-transform: uppercase;
}

/* Títulos das Sub-seções do Rodapé */
.footer-links h4,
.footer-contact h4,
.footer-social h4 {
    font-size: 2.2rem;
    color: var(--main-color); /* Cor de destaque para os títulos */
    margin-bottom: 2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    position: relative; /* Para o underline */
    padding-bottom: 0.5rem; /* Espaço para o underline */
}

/* Underline sutil para os títulos do rodapé */
.footer-links h4::after,
.footer-contact h4::after,
.footer-social h4::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 50px; /* Largura do underline */
    height: 3px;
    background-color: var(--text-color); /* Cor branca */
    border-radius: 2px;
}


/* Listas de Links e Contato */
.footer-links ul,
.footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links ul li,
.footer-contact ul li {
    margin-bottom: 1.2rem;
    font-size: 1.8rem;
    color: #c0c0c0; /* Cinza claro para o texto */
    display: flex; /* Para alinhar ícone e texto */
    align-items: center;
}

.footer-links ul li a {
    color: #c0c0c0;
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block; /* Para o transform */
}

.footer-links ul li a:hover {
    color: var(--main-color); /* Destaque no hover */
    transform: translateX(5px); /* Desliza um pouco para a direita */
}

.footer-contact ul li i {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--main-color); /* Ícones na cor de destaque */
}

/* Redes Sociais */
.social-icons {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.social-icons a {
    font-size: 2.8rem; /* Tamanho dos ícones */
    color: var(--text-color); /* Cor branca padrão */
    width: 50px; /* Área clicável para o ícone */
    height: 50px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1); /* Fundo sutil para cada ícone */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.social-icons a:hover {
    background-color: var(--main-color); /* Fundo muda para a cor principal no hover */
    color: var(--bg-color); /* Ícone fica mais escuro no hover */
    transform: translateY(-5px) scale(1.1); /* Leve elevação e zoom */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
}

/* Horário de Funcionamento */
.footer-hours p {
    font-size: 1.7rem;
    color: #c0c0c0;
    margin-bottom: 0.8rem;
}

/* Parte Inferior do Rodapé */
.footer-bottom {
    text-align: center;
    font-size: 1.5rem;
    color: #909090; /* Cinza mais escuro para o texto de copyright */
    padding-top: 3rem;
}

.footer-bottom p {
    margin-bottom: 0.8rem;
}

.footer-bottom p:last-child {
    margin-bottom: 0;
}

/* --- Media Queries para Responsividade --- */

/* Tablets e laptops pequenos (768px - 1024px) */
@media (max-width: 1024px) {
    .footer-container {
        gap: 3rem;
        justify-content: center; /* Centraliza melhor as colunas em 2x2 */
    }

    .footer-logo,
    .footer-links,
    .footer-contact,
    .footer-social {
        flex: 1 1 200px; /* Ajusta a largura base para acomodar 2 colunas */
        padding: 1.8rem;
    }

    .footer-logo h3 {
        font-size: 2.5rem;
    }

    .footer-links h4,
    .footer-contact h4,
    .footer-social h4 {
        font-size: 2rem;
    }

    .footer-links ul li,
    .footer-contact ul li,
    .footer-hours p {
        font-size: 1.6rem;
    }

    .social-icons a {
        font-size: 2.5rem;
        width: 45px;
        height: 45px;
    }
}

/* Smartphones (até 767px) */
@media (max-width: 767px) {
    .footer {
        padding: 5rem 1rem 2rem;
    }

    .footer-container {
        flex-direction: column; /* Empilha todas as colunas */
        align-items: center; /* Centraliza os itens empilhados */
        gap: 4rem; /* Mais espaço entre as seções empilhadas */
        margin-bottom: 3rem;
    }

    .footer-logo,
    .footer-links,
    .footer-contact,
    .footer-social {
        flex: 1 1 90%; /* Ocupa quase toda a largura */
        max-width: 400px; /* Limita a largura em celulares maiores */
        padding: 2.5rem;
        text-align: center; /* Centraliza o texto dentro de cada coluna */
        align-items: center; /* Centraliza logo e outros itens */
    }

    /* Ajuste para centralizar o underline dos títulos no mobile */
    .footer-links h4::after,
    .footer-contact h4::after,
    .footer-social h4::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .social-icons {
        justify-content: center; /* Centraliza os ícones sociais */
    }

    .footer-logo img {
        margin-left: auto;
        margin-right: auto;
    }

    .footer-contact ul li {
        justify-content: center; /* Centraliza ícones e texto de contato */
    }

    .footer-bottom {
        font-size: 1.4rem;
    }
}

/* Smartphones menores (até 480px) */
@media (max-width: 480px) {
    .footer-logo h3 {
        font-size: 2.2rem;
    }

    .footer-links h4,
    .footer-contact h4,
    .footer-social h4 {
        font-size: 1.8rem;
    }

    .footer-links ul li,
    .footer-contact ul li,
    .footer-hours p {
        font-size: 1.5rem;
    }

    .social-icons a {
        font-size: 2.2rem;
        width: 40px;
        height: 40px;
    }

    .footer-bottom {
        font-size: 1.3rem;
    }
}