/* Define as variáveis de cor para reutilização em toda a aplicação */
:root {
    --blue-pastel: #A4C8E1; /* Azul pastel */
    --yellow-pastel: #FFF3CF; /* Amarelo pastel */
    --orange-dark: #D0BD36; /* Laranja escuro */
    --pink-pastel: #F1D1D0; /* Rosa pastel */
    --beige-pastel: #a3c8d4; /* Bege pastel */
    --gray-deep: #2B2B2B; /* Cinza profundo */
    --green-pastel: #77B300; /* Verde pastel */
}

/* Reseta margens e preenchimentos padrão do navegador */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que o padding e a borda não afetem a largura total */
    font-family: 'Arial', sans-serif; /* Define a fonte padrão */
}

/* Estilos gerais do corpo da aplicação */
body {
    background-color: var(--yellow-pastel); /* Cor de fundo com variável */
    color: #333; /* Cor da fonte */
    line-height: 1.6; /* Aumenta a legibilidade do texto */
}

/* Estilos para listas */
ul {
    padding-left: 20px; /* Adiciona preenchimento à esquerda das listas */
    list-style-type: disc; /* Formato da lista */
}

li {
    margin-bottom: 15px; /* Espaçamento entre itens da lista */
    white-space: normal; /* Permite que o texto quebre uma linha */
    text-align: left; /* Alinhamento do texto à esquerda */
    padding-left: 5px; /* Preenchimento adicional à esquerda */
}

/* Estilo para título de nível 2 */
h2.titulo {
    color: #D0BD36; /* Cor do título */
    font-size: 38px; /* Tamanho da fonte */
    text-align: center; /* Centraliza o texto */
}

/* Estilização da barra de navegação */
.navbar {
    background-color: white; /* Cor de fundo da navbar */
    padding: 1rem; /* Preenchimento da navbar */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra leve para efeito de profundidade */
    position: fixed; /* Fixa a barra no topo */
    width: 100%; /* Preenche toda a largura */
    top: 0; /* Fica no topo da página */
    z-index: 1000; /* Garante que a navbar fique sobre outros elementos */
}

/* Estilos do conteúdo da barra de navegação */
.navbar-content {
    max-width: 1200px; /* Limita a largura máxima do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
    display: flex; /* Usar flexbox para layout */
    justify-content: space-between; /* Espaçamento entre itens */
    align-items: center; /* Alinha os itens ao centro verticalmente */
}

/* Estilo para o logotipo */
.logo {
    font-size: 1.5rem; /* Tamanho da fonte do logotipo */
    color: var(--orange-dark); /* Usa a variável de cor */
    font-weight: bold; /* Negrito */
    position: relative; /* Necessário para a animação */
    overflow: hidden; /* Esconde qualquer transbordo do conteúdo */
    animation: logoFloat 3s ease-in-out infinite; /* Animação de flutuação */
}

/* Animação de flutuação do logotipo */
@keyframes logoFloat {
    0%, 100% { transform: translateY(0); } /* Sem movimento */
    50% { transform: translateY(-5px); } /* Move para cima */
}

/* Estilo dos links de navegação */
.nav-links {
    display: flex; /* Flexbox para alinhamento horizontal */
    gap: 2rem; /* Espaçamento entre os links */
}

.nav-links a {
    text-decoration: none; /* Remove o sublinhado */
    color: var(--orange-dark); /* Cor dos links */
    font-weight: 500; /* Peso da fonte */
    position: relative; /* Necessário para o efeito ::after */
    padding: 0.5rem 0; /* Preenchimento vertical */
    transition: color 0.3s; /* Transição suave de cor */
}

/* Efeito de sublinhado animado ao passar o mouse sobre os links */
.nav-links a::after {
    content: '';
    position: absolute;
    width: 100%; /* Preenche a largura do link */
    height: 2px; /* Altura do sublinhado */
    bottom: 0; /* Posiciona ao fundo do link */
    left: 0; /* Alinha à esquerda */
    background-color: var(--orange-dark); /* Cor do sublinhado */
    transform: scaleX(0); /* Inicialmente oculto */
    transform-origin: right; /* Origem da animação à direita */
    transition: transform 0.3s ease-in-out; /* Transição suave para o efeito */
}

.nav-links a:hover::after {
    transform: scaleX(1); /* Mostra o sublinhado ao passar o mouse */
    transform-origin: left; /* Origem muda para a esquerda */
}

/* Estilo do botão do menu móvel */
.mobile-menu-btn {
    display: none; /* Oculto por padrão em desktop */
    flex-direction: column; /* Exibe como coluna */
    gap: 4px; /* Espaçamento entre linhas */
    cursor: pointer; /* Muda o cursor ao passar sobre */
    padding: 5px; /* Preenchimento do botão */
}

/* Estilo das linhas do botão do menu móvel */
.mobile-menu-btn span {
    width: 25px; /* Largura das linhas */
    height: 3px; /* Altura das linhas */
    background-color: var(--orange-dark); /* Cor das linhas */
    transition: all 0.3s ease-in-out; /* Transição suave para a animação */
}

/* Efeitos de animação do botão do menu móvel quando ativo */
.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* Animação para a primeira linha */
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0; /* Esconde a segunda linha */
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px); /* Animação para a terceira linha */
}

/* Estilo para a seção herói */
.hero {
    background: linear-gradient(to bottom, white, var(--yellow-pastel)); /* Degradê de fundo */
    padding: 8rem 2rem 4rem; /* Preenchimento da seção */
    text-align: center; /* Centraliza o texto */
}

.hero h1 {
    color: var(--orange-dark); /* Cor do título */
    font-size: 2.5rem; /* Tamanho do título */
    margin-bottom: 1rem; /* Espaçamento inferior */
}

.hero p {
    color: var(--orange-dark); /* Cor do texto */
    font-size: 1.2rem; /* Tamanho do texto */
    max-width: 600px; /* Limita a largura do texto */
    margin: 0 auto; /* Centraliza o texto */
}

/* Estilo para a seção de serviços */
.services {
    padding: 4rem 2rem; /* Preenchimento da seção */
    background: linear-gradient(to bottom, var(--yellow-pastel), var(--blue-pastel)); /* Degradê de fundo */
}

/* Design da grade de serviços usando CSS Grid */
.services-grid {
    display: grid; /* Ativa o grid layout */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Layout responsivo */
    gap: 2rem; /* Espaçamento entre os cards */
    max-width: 1100px; /* Limita a largura máxima */
    margin: 0 auto; /* Centraliza o grid */
}

/* Estilo para os cards de serviços */
.service-card {
    background-color: var(--pink-pastel); /* Cor de fundo do card */
    padding: 2rem; /* Preenchimento do card */
    border-radius: 10px; /* Cantos arredondados */
    text-align: center; /* Centraliza o texto */
    transition: transform 0.3s; /* Transição suave ao passar o mouse */
    margin-top: 150px; /* Espaçamento superior */
}

.service-card:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
}

/* Estilo para títulos dos serviços */
.service-card h3 {
    color: var(--orange-dark); /* Cor do título do serviço */
    margin-bottom: 1rem; /* Espaçamento inferior */
}

/* Estilização da seção de depoimentos */
.testimonials {
    background: linear-gradient(to bottom, var(--blue-pastel), var(--yellow-pastel)); /* Degradê de fundo */
    padding: 4rem 2rem; /* Preenchimento da seção */
}

.testimonial-container {
    max-width: 800px; /* Limita a largura do contêiner */
    margin: 0 auto; /* Centraliza o contêiner */
    text-align: center; /* Centraliza o texto */
}

/* Estilos para os depoimentos individuais */
.testimonial {
    display: none; /* Oculta os depoimentos por padrão */
    padding: 2rem; /* Preenchimento do depoimento */
}

.testimonial.active {
    display: block; /* Mostra o depoimento ativo */
}

/* Indicadores de depoimentos (como dots) */
.indicators {
    position: none; /* Remova essa propriedade, pois "none" não é um valor válido */
    text-align: center; /* Centraliza o texto */
    bottom: 10px; /* Posiciona na parte inferior */
    left: 50%; /* Centraliza horizontalmente */
    transform: translateX(-50%); /* Ajusta a posição */
    display: none; /* Oculta por padrão */
}

.indicator {
    cursor: pointer; /* Muda o cursor ao passar sobre */
    height: 10px; /* Altura do indicador */
    width: 10px; /* Largura do indicador */
    margin: 5px; /* Margem entre indicadores */
    display: inline-block; /* Exibe como bloco inline */
}

/*-------------------------------------CONTATO----------------------------------*/
.contact-container {
    max-width: 1200px; /* Limita a largura máxima do contêiner de contato */
    margin: 0 auto; /* Centraliza o contêiner */
}

/* Título principal da página de contato */
.main-title {
    text-align: center; /* Centraliza o texto */
    font-size: 3rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    color: var(--orange-dark); /* Usa a variável de cor */
    margin-bottom: 20px; /* Espaçamento inferior */
    text-transform: uppercase; /* Transforma texto em maiúsculas */
    letter-spacing: 3px; /* Espaçamento entre letras */
}

/* Subtítulo principal */
.main-subtitle {
    text-align: center; /* Centraliza o texto */
    font-size: 1.1rem; /* Tamanho da fonte */
    color: #2B2B2B; /* Cor do texto */
    margin-bottom: 60px; /* Espaçamento inferior */
    max-width: 600px; /* Limita a largura do subtítulo */
    margin-left: auto; /* Margem à esquerda automático */
    margin-right: auto; /* Margem à direita automático */
    line-height: 1.8; /* Aumenta a legibilidade do texto */
}

/* Estilo da grade de contato */
.contact-grid {
    display: grid; /* Ativa o grid layout */
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); /* Layout responsivo */
    gap: 30px; /* Espaçamento entre os cards */
    margin-bottom: 40px; /* Espaçamento na parte inferior */
}

/* Estilo para os cards de contato */
.contact-card {
    background: var(--pink-pastel); /* Cor de fundo do card */
    border: 1px solid #2B2B2B; /* Borda do card */
    border-radius: 12px; /* Cantos arredondados */
    padding: 35px 25px; /* Preenchimento do card */
    text-align: center; /* Centraliza o texto */
    transition: all 0.3s ease; /* Transição suave para efeito hover */
    position: relative; /* Necessário para posicionamento de elementos internos */
}

.contact-card:hover {
    transform: translateY(-5px); /* Efeito de elevação ao passar o mouse */
    border-color: #00ff08; /* Muda a cor da borda ao passar o mouse */
    box-shadow: 0 10px 25px rgba(0, 255, 136, 0.1); /* Adiciona sombra ao passar o mouse */
}

/* Estilo do ícone dos cards */
.card-icon {
    width: 60px; /* Largura do ícone */
    height: 60px; /* Altura do ícone */
    background: var(--blue-pastel); /* Cor de fundo do ícone */
    border-radius: 8px; /* Cantos arredondados */
    display: flex; /* Usar flexbox para centralizar */
    align-items: center; /* Alinha itens ao centro verticalmente */
    justify-content: center; /* Alinha itens ao centro horizontalmente */
    margin: 0 auto 25px; /* Margens automáticas */
    font-size: 1.5rem; /* Tamanho da fonte do ícone */
    color: var(--gray-deep); /* Cor do ícone */
}

/* Título do card de contato */
.card-title {
    font-size: 1.4rem; /* Tamanho da fonte do título */
    font-weight: bold; /* Negrito */
    color: var(--orange-dark); /* Cor do título */
    margin-bottom: 15px; /* Espaçamento inferior */
}

/* Descrição do card de contato */
.card-description {
    color: #2B2B2B; /* Cor do texto */
    font-size: 0.95rem; /* Tamanho da fonte */
    margin-bottom: 30px; /* Espaçamento inferior */
    line-height: 1.6; /* Aumenta a legibilidade do texto */
}

/* Estilo do botão do WhatsApp */
.whatsapp-btn {
    background-color: #00dd77; /* Cor de fundo do botão */
    color: #000000; /* Cor do texto */
    padding: 12px 25px; /* Preenchimento do botão */
    border: none; /* Remove borda */
    margin-top: 30px; /* Margem superior */
    border-radius: 25px; /* Cantos arredondados */
    font-size: 0.95rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    cursor: pointer; /* Muda o cursor ao passar sobre */
    transition: all 0.3s ease; /* Transição suave para efeitos */
    text-decoration: none; /* Remove o sublinhado */
    display: inline-flex; /* Usa flexbox para layout */
    align-items: center; /* Alinha itens verticalmente ao centro */
    gap: 8px; /* Espaçamento entre ícone e texto */
    width: 100%; /* Ocupa a largura total */
    justify-content: center; /* Centraliza o conteúdo */
}

.whatsapp-btn:hover {
    background-color: #05ee4b; /* Cor em hover */
    transform: scale(1.02); /* Leve aumento ao passar o mouse */
}

/* Estilo de contato direto */
.contact-direct {
    background: var(--pink-pastel); /* Cor de fundo */
    border: 1px solid #3a3a3a; /* Borda */
    border-radius: 12px; /* Cantos arredondados */
    padding: 30px; /* Preenchimento */
    margin-bottom: 40px; /* Margem inferior */
    display: grid; /* Ativa o layout grid */
    grid-template-columns: 1fr auto; /* Distribui espaço entre colunas */
    align-items: center; /* Alinha verticalmente */
    gap: 30px; /* Espaçamento entre colunas */
}

/* Estilo do título da seção de contato */
.contact-info-left h3 {
    font-size: 1.5rem; /* Tamanho do título */
    font-weight: bold; /* Negrito */
    color: var(--orange-dark); /* Cor do título */
    margin-bottom: 20px; /* Margem inferior */
}

/* Métodos de contato */
.contact-methods {
    display: flex; /* Usar flexbox para layout */
    flex-direction: column; /* Exibe em coluna */
    gap: 12px; /* Espaçamento entre métodos */
}

.contact-method {
    display: flex; /* Usar flexbox */
    align-items: center; /* Alinha verticalmente */
    gap: 12px; /* Espaçamento entre ícone e texto */
    color: #2B2B2B; /* Cor do texto */
}

.contact-method i {
    color: #00ff08; /* Cor do ícone */
    font-size: 1.1rem; /* Tamanho do ícone */
    width: 20px; /* Largura do ícone */
}

.contact-method strong {
    color: var(--orange-dark); /* Cor de texto em negrito */
    margin-right: 8px; /* Margem direita */
}

/* Estilo para à direita nas informações de contato */
.contact-info-right {
    text-align: center; /* Centraliza o texto */
}

/* Informações de resposta */
.response-info {
    color: #cccccc; /* Cor do texto */
    font-size: 0.9rem; /* Tamanho da fonte */
    margin-bottom: 15px; /* Margem inferior */
}

.response-highlight {
    color: #00ff08; /* Realça o texto */
    font-weight: bold; /* Negrito */
}

/* Estilo do botão principal de contato */
.main-contact-btn {
    background-color: #00ff08; /* Cor de fundo */
    color: #000000; /* Cor do texto */
    padding: 15px 30px; /* Preenchimento */
    margin-right: 20px; /* Margem à direita */
    border: none; /* Remove bordas */
    border-radius: 25px; /* Cantos arredondados */
    font-size: 1rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    cursor: pointer; /* Muda o cursor ao passar sobre */
    transition: all 0.3s ease; /* Transição suave */
    text-decoration: none; /* Remove sublinhado */
    display: inline-flex; /* Usar flexbox */
    align-items: center; /* Alinha itens verticalmente ao centro */
    gap: 10px; /* Espaçamento entre ícone e texto */
}

.main-contact-btn:hover {
    background-color: #00dd77; /* Cor em hover */
    transform: scale(1.05); /* Aumenta ao passar o mouse */
}

/* Estilo da seção de redes sociais */
.social-section {
    text-align: center; /* Centraliza o texto */
    margin-top: 60px; /* Margem superior */
}

/* Título da seção de redes sociais */
.social-title {
    font-size: 1.3rem; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    color: var(--orange-dark); /* Cor do título */
    margin-bottom: 25px; /* Margem inferior */
}

/* Links das redes sociais */
.social-links {
    display: flex; /* Usar flexbox */
    justify-content: center; /* Centraliza os links */
    gap: 20px; /* Espaçamento entre links */
}

/* Estilo para cada link de rede social */
.social-link {
    width: 50px; /* Largura do link */
    height: 50px; /* Altura do link */
    background: var(--blue-pastel); /* Cor de fundo */
    border-radius: 8px; /* Cantos arredondados */
    display: flex; /* Usar flexbox */
    align-items: center; /* Alinha verticalmente */
    justify-content: center; /* Alinha horizontalmente */
    color: #FFFFFF; /* Cor do texto */
    text-decoration: none; /* Remove sublinhado */
    font-size: 1.2rem; /* Tamanho da fonte */
    transition: all 0.3s ease; /* Transição suave */
}

/* Efeito em hover para os links de redes sociais */
.social-link:hover {
    background: violet; /* Cor de fundo ao passar o mouse */
    color: #000000; /* Cor do texto ao passar o mouse */
    transform: translateY(-3px); /* Efeito de movimento ao passar o mouse */
}

/* Estilo do rodapé */
footer {
    background-color: var(--orange-deep); /* Cor de fundo do rodapé */
    color: var(--gray-deep); /* Cor do texto no rodapé */
    text-align: center; /* Centraliza o texto */
    padding: 2rem; /* Preenchimento */
}

/* Estilos responsivos para dispositivos móveis */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex; /* Exibe o botão do menu móvel em dispositivos pequenos */
    }

    .nav-links {
        display: none; /* Oculta a lista de links de navegação */
        position: absolute; /* Posiciona os links */
        top: 100%; /* Abaixo da navbar */
        left: 0; /* Alinha à esquerda */
        width: 100%; /* Preenche a largura */
        background-color: white; /* Fundo branco */
        padding: 1rem; /* Preenchimento */
        flex-direction: column; /* Exibe como coluna */
        align-items: center; /* Centraliza os itens */
        gap: 1rem; /* Espaçamento entre links */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona sombra */
    }

    .nav-links.active {
        display: flex; /* Mostra a lista de links ativos */
        animation: slideDown 0.3s ease-in-out; /* Animação ao abrir o menu */
    }

    @keyframes slideDown {
        from {
            opacity: 0; /* Começa invisível */
            transform: translateY(-10px); /* Movimenta para cima */
        }
        to {
            opacity: 1; /* Fica visível */
            transform: translateY(0); /* Retorna à posição original */
        }
    }

    .hero h1 {
        font-size: 2rem; /* Ajusta o tamanho do título para dispositivos móveis */
    }
}