/* 1. RESET BÁSICO E CONFIGURAÇÕES GLOBAIS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Paleta de Cores Baseada no Logo */
    --color-black: #1a1a1a; /* Um preto um pouco mais suave que o #000 */
    --color-orange: #fd8625;  /* O cinza do logo */
    --color-white: #FFFFFF;
    --color-bg-light: #f9f9f9; /* Um cinza bem claro para fundos de seção */

    /* Aliases para componentes */
    --color-primary: #fd8625;
    --color-primary-dark: #e67419;

    /* Fontes */
    --font-primary: 'Poppins', sans-serif;
}

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #ffffff;
}

::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: 
    linear-gradient(to bottom,
      #ffffff 20%,
      #fd8625 100%
    );
}

html {
    scroll-behavior: smooth; /* Rolagem suave ao clicar nos links do menu */
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-white);
    color: var(--color-black);
    line-height: 1.6;
    box-sizing: border-box;
}

body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(45deg, #fd8625, #fff, #fd8625);
  background-size: 200% 200%;
  animation: degradeAnimado 10s ease infinite;
  opacity: 0.05;
}

.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 2. ESTILOS DO CABEÇALHO (HEADER) */
.header {
    background-color: var(--color-white);
    border-bottom: 1px solid #eee;
    padding: 15px 0;
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
}

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

.nav-logo {
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 1002; /* Fica acima de tudo (menu é 999, botão é 1001) */
}

.nav-logo img {
    height: 80px; /* Ajuste a altura do seu logo */
    width: auto;
    margin: 0;
    padding: 0;
}

.nav-menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
}

.nav-link {
    text-decoration: none;
    color: var(--color-black);
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-orange); /* Cor de destaque ao passar o mouse */
}

/* 3. BOTÕES (REUTILIZÁVEIS) */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary {
    background-color: var(--color-black);
    color: var(--color-white);
}

.btn-primary:hover {
    opacity: 0.8;
}

.btn-secondary {
    background-color: var(--color-orange);
    color: var(--color-white);
}

.btn-secondary:hover {
    background-color: var(--color-black);
    color: var(--color-white);
}

/* Botão de contato no menu */
.btn-outline {
    border: 2px solid var(--color-black);
    background: transparent;
    color: var(--color-black);
}

.btn-outline:hover {
    background: var(--color-black);
    color: var(--color-white);
}


/* 4. SEÇÃO PRINCIPAL (HERO) */
.hero {
    background-color: var(--color-white);
    padding: 80px 0;
    text-align: center;
}

.hero-content {
    max-width: 750px;
    margin: 0 auto;
}

.hero-title {
    font-size: 3.2rem;
    font-weight: 700;
    color: var(--color-white); /* Cor original do seu CSS */
    line-height: 1.2;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--color-orange); /* Cor original do seu CSS */
    margin-bottom: 30px;
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

/* 5. SEÇÃO DE SERVIÇOS */
.services {
    padding: 80px 0;
    background-color: var(--color-bg-light); /* Fundo cinza claro */
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 50px;
    color: var(--color-black);
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.service-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.service-icon {
    font-size: 3rem;
    color: var(--color-orange); /* Ícone no cinza do logo */
    margin-bottom: 20px;
}

/* Classe para quem acessibilidade: esconde visualmente, mas mantém para leitores de tela */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.service-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 6. RODAPÉ (FOOTER) */
.footer {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 40px 0;
}

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

.footer-social a {
    color: var(--color-white);
    text-decoration: none;
    margin-left: 15px;
    transition: color 0.3s ease;
}

.footer-social a:hover {
    color: var(--color-orange);
}

/* --- NOVAS SEÇÕES ABAIXO --- */

/* 8. SEÇÃO QUEM SOMOS (SOBRE) */
.about {
    padding: 80px 0;
    background-color: var(--color-white);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.about-image img {
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    height: 400px; /* Altura fixa para a imagem */
}

.about-content .section-title {
    text-align: left; /* Alinha o título da seção à esquerda */
    margin-bottom: 20px;
}

.about-content p {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 20px;
}

.about-content .btn {
    margin-top: 10px;
}

/* 9. SEÇÃO VAGAS RECENTES (JOBS) */
.featured-jobs {
    padding: 80px 0;
    background-color: var(--color-bg-light); /* Fundo cinza claro */
}

.jobs-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.job-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 30px;
    background-color: var(--color-white);
    border: 1px solid #eee;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.job-card:hover {
    border-color: var(--color-orange);
    box-shadow: 0 4px 10px rgba(0,0,0,0.03);
    transform: translateY(-3px);
}

.job-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--color-black);
    margin-bottom: 2px;
}

.job-location {
    color: var(--color-orange);
    font-weight: 500;
}

.jobs-all-cta {
    text-align: center;
    margin-top: 40px;
}

/* 10. SEÇÃO AVALIAÇÕES (TESTIMONIALS) */
.testimonials {
    padding: 80px 0;
    background-color: var(--color-white);
}

.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.testimonial-card {
    background-color: var(--color-bg-light);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-text {
    font-size: 1.1rem;
    font-style: italic;
    color: #555;
    margin-bottom: 20px;
    position: relative;
    padding-left: 20px;
    border-left: 3px solid var(--color-orange);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-name {
    font-weight: 700;
    color: var(--color-black);
}

.author-title {
    font-size: 0.9rem;
    color: #777;
}

/* 11. SEÇÃO DE CONTATO */
.contact {
    padding: 80px 0;
    background-color: var(--color-bg-light);
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    background-color: var(--color-white);
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.contact-info h3 {
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.contact-info p {
    margin-bottom: 20px;
    color: #555;
}

.contact-info ul {
    list-style: none;
    line-height: 2;
}

.contact-info a {
    text-decoration: none;
    color: inherit; /* evita o azul padrão */
    -webkit-tap-highlight-color: transparent; /* remove o brilho azul em mobile */
    outline: none;
    transition: color 0.2s ease;
}

.contact-info a:visited,
.contact-info a:focus,
.contact-info a:active {
    color: inherit;
    outline: none;
    box-shadow: none;
}

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

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-primary);
}

.contact-form button {
    width: 100%;
    font-size: 1.1rem;
}


/* 7. RESPONSIVIDADE (PARA CELULARES) */
/* (Seu código original) */
@media (max-width: 768px) {

    /* --- RESPONSIVIDADE DAS NOVAS SEÇÕES --- */

    /* Ajusta o "Sobre Nós" */
    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .about-image {
        order: -1; /* Joga a imagem para cima no mobile */
    }
    
    /* Ajusta as "Vagas" */
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .job-card .btn {
        width: 100%;
        text-align: center;
    }

    /* Ajusta as "Avaliações" */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* Ajusta o "Contato" */
    .contact-grid {
        grid-template-columns: 1fr;
        padding: 25px;
    }
}

/* 13. ESTILO DO CABEÇALHO DE PÁGINA INTERNA */
.page-header {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 50px 0;
    text-align: center;
}

.page-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
}

/* Ajuste para telas menores */
@media (max-width: 768px) {
    .page-header h1 {
        font-size: 2.2rem;
    }
}

/* --- ESTILOS DA PÁGINA "PARA EMPRESA" --- */

/* Ajuste no Header de Página */
.page-header {
    background-color: var(--color-black);
    color: var(--color-white);
    padding: 60px 0; /* Aumentei o padding */
    text-align: center;
}

.page-header h1 {
    font-size: 2.8rem;
    font-weight: 700;
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--color-orange);
    margin-top: 10px;
}

/* 14. SEÇÃO DADOS DE MELHORIA (MÉTRICAS) */
.data-metrics {
    padding: 80px 0;
    background-color: var(--color-bg-light); /* Cinza claro */
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.metric-card {
    background-color: var(--color-white);
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
    text-align: center;
}

.metric-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--color-black);
    line-height: 1.1;
}

.metric-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin: 10px 0;
}

/* 15. SEÇÃO NOSSO PROCESSO */
.process {
    padding: 80px 0;
    background-color: var(--color-white);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.process-step {
    text-align: center;
    padding: 20px;
    border: 1px solid var(--color-orange);
    border-radius: 10px;
}

.process-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-orange);
    margin-bottom: 10px;
    display: block;
}

.process-step h4 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* 16. FORMULÁRIO DE CAPTAÇÃO (CTA B2B) */
.cta-form {
    padding: 80px 0;
    background-color: var(--color-black);
    color: var(--color-white);
}

.cta-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.cta-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
}

.cta-text p {
    font-size: 1.1rem;
    color: #ccc; /* Cinza claro para o texto */
    margin-bottom: 20px;
}

/* Reutiliza .contact-form mas com fundo escuro */
.contact-form-b2b label,
.empresa-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #eee;
}

.contact-form-b2b input,
.contact-form-b2b textarea,
.empresa-form input,
.empresa-form textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #555; /* Borda mais escura */
    border-radius: 5px;
    font-family: var(--font-primary);
    background-color: #333; /* Fundo do input */
    color: var(--color-white); /* Texto do input */
}

.contact-form-b2b .form-group,
.empresa-form .form-group {
    margin-bottom: 20px;
}

.contact-form-b2b button,
.empresa-form button {
    width: 100%;
    font-size: 1.1rem;
    background-color: var(--color-white); /* Botão branco */
    color: var(--color-black); /* Texto preto */
}

.contact-form-b2b button:hover,
.empresa-form button:hover {
    background-color: var(--color-orange);
    color: var(--color-black);
}

/* --- AJUSTES DE RESPONSIVIDADE PARA NOVAS SEÇÕES --- */
@media (max-width: 768px) {
    .metrics-grid {
        grid-template-columns: 1fr; /* 1 coluna */
    }

    .process-grid {
        grid-template-columns: 1fr; /* 1 coluna */
    }

    .cta-form-grid {
        grid-template-columns: 1fr; /* 1 coluna */
    }
}

/* --- AJUSTES DA SEÇÃO DE AVALIAÇÕES (SWIPER) --- */


/* 2. Garante que o card ocupe o espaço do slide */
.swiper-slide {
    height: auto; /* Permite que o card defina a altura */
    padding-bottom: 50px; /* Cria espaço para as bolinhas da paginação */
}

/* 3. Garante que os cards tenham a mesma altura dentro do swiper */
.testimonial-card {
    height: 100%; /* Faz o card preencher o slide */
    min-height: 250px; /* Define uma altura mínima */
    /* Os outros estilos do .testimonial-card (padding, border, etc.) continuam os mesmos */
}

/* 4. Estiliza as "bolinhas" da paginação */
.swiper-pagination {
    position: absolute;
    bottom: 10px !important; /* Posição das bolinhas */
}

.swiper-pagination-bullet {
    background-color: var(--color-orange);
    width: 10px;
    height: 10px;
    opacity: 0.6;
}

.swiper-pagination-bullet-active {
    background-color: var(--color-black);
    opacity: 1;
}

/* --- ESTILOS DA PÁGINA "VAGAS" --- */

/* 17. SEÇÃO DA PÁGINA DE VAGAS */
.jobs-page-section {
    padding: 80px 0;
    background-color: var(--color-white);
}

/* 18. FILTRO DE VAGAS */
.job-filters {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr auto;
    gap: 15px;
    background-color: var(--color-bg-light);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 40px;
}

.filter-input,
.filter-select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-family: var(--font-primary);
    font-size: 15px;
}

.job-filters .btn {
    padding: 12px 20px; /* Botão de busca menor */
}

/* 19. BANCO DE TALENTOS (ENVIE SEU CURRÍCULO) */
.talent-pool {
    padding: 80px 0;
    background-color: var(--color-black);
    color: var(--color-white);
}

.talent-pool-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.talent-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.talent-text p {
    font-size: 1.1rem;
    color: #ccc;
}

.talent-form .form-group-inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 15px;
}

.talent-form input {
    width: 100%;
    padding: 12px;
    border: 1px solid #555;
    border-radius: 5px;
    font-family: var(--font-primary);
    background-color: #333;
    color: var(--color-white);
}

.talent-form label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
}

/* Estilo do Input de Arquivo */
.talent-form input[type="file"] {
    padding: 10px;
    border: 1px dashed #777;
    background-color: transparent;
    cursor: pointer;
}

/* Texto do placeholder do input file */
.talent-form input[type="file"]::file-selector-button {
    background-color: var(--color-orange);
    color: var(--color-black);
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.talent-form .btn {
    width: 100%;
    margin-top: 15px;
    font-size: 1.1rem;
}

/* 20. SEÇÃO DE PROCESSO (Ajustes) */
.process .section-subtitle {
    text-align: center;
    font-size: 1.1rem;
    color: #555;
    max-width: 600px;
    margin: -30px auto 40px auto;
}


/* --- RESPONSIVIDADE DAS NOVAS SEÇÕES (VAGAS) --- */
@media (max-width: 768px) {
    /* Ajusta Filtros */
    .job-filters {
        grid-template-columns: 1fr; /* 1 coluna */
    }

    /* Ajusta Banco de Talentos */
    .talent-pool-content {
        grid-template-columns: 1fr; /* 1 coluna */
    }

    .talent-form .form-group-inline {
        grid-template-columns: 1fr; /* 1 coluna */
    }
}

/* --- ESTILOS DA PÁGINA "CONTATO" --- */

/* 21. MAPA DE LOCALIZAÇÃO */
.map-location {
    padding: 0; /* O iframe vai de ponta a ponta */
    line-height: 0; /* Remove espaço extra do iframe */
}

.map-location iframe {
    width: 100%;
    border: 0; /* Garante que não tenha borda */
}

/* 22. ESTADO ATIVO PARA O BOTÃO DE CONTATO NO MENU */
.nav-link.btn-outline.active {
    background: var(--color-black);
    color: var(--color-white);
}

/* Ajuste: Remove o fundo da seção de contato da home (se você for removê-la) */
/* Se você ainda quiser a seção de contato na home, pode ignorar este ajuste */
.contact {
    background-color: var(--color-white); /* Garante que na página de contato o fundo seja branco */
}

/* --- EFEITOS DE TRANSIÇÃO E HOVER --- */

/* 23. EFEITO "LEVITAR" PARA CARDS */

/* Adiciona a transição a todos os cards */
.service-card,
.job-card,
.testimonial-card,
.metric-card,
.process-step {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* O efeito ao passar o mouse */
.service-card:hover,
.job-card:hover,
.testimonial-card:hover,
.metric-card:hover,
.process-step:hover {
    transform: translateY(-5px); /* Move 5px para cima */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07); /* Adiciona uma sombra suave */
}

/* 24. ANIMAÇÃO DE FADE-IN AO ROLAR */

/* Define o estado inicial (escondido)
  Qualquer elemento com a classe .fade-in-section
*/
.fade-in-section {
    opacity: 0; /* Começa 100% transparente */
    transform: translateY(20px); /* Começa 20px para baixo */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Define o estado final (visível)
  Quando o JavaScript adicionar a classe .is-visible
*/
.fade-in-section.is-visible {
    opacity: 1; /* Fica 100% visível */
    transform: translateY(0); /* Volta à posição original */
}

/* --- ESTILOS DA PÁGINA "BLOG" (ATUALIZAÇÃO P/ CARD HORIZONTAL) --- */

.blog-section {
    padding: 80px 0;
    background-color: var(--color-white);
}

/* 1. MUDANÇA: De "Grid" para Lista "Flex Column" */
.news-grid {
    display: flex;
    flex-direction: column; /* Coloca um card embaixo do outro */
    gap: 30px;
    max-width: 900px; /* Limita a largura para melhor leitura */
    margin: 0 auto; /* Centraliza a lista */
}

/* 2. MUDANÇA: O card agora é horizontal (flex-direction: row) */
.news-card {
    background-color: var(--color-bg-light);
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: row; /* Imagem na esquerda, conteúdo na direita */
    height: auto; /* Remove altura fixa */
    min-height: 0; /* Reseta min-height */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
}

/* 3. MUDANÇA: Imagem com largura fixa */
.news-image {
    width: 240px; /* Largura fixa para a imagem */
    height: 160px; /* Altura fixa para alinhar */
    object-fit: cover;
    flex-shrink: 0; /* Impede a imagem de encolher */
}

/* 4. MUDANÇA: Conteúdo preenche o espaço restante */
.news-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
}

.news-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.news-source {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-black);
    background-color: #eee;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 60%;
}

.news-date {
    font-size: 0.85rem;
    color: var(--color-orange);
    margin-bottom: 0;
}

.news-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 15px;
    flex-grow: 1; /* Empurra o botão para baixo */
}

.news-content .btn-outline {
    text-align: center;
}

.loading-news {
    font-size: 1.2rem;
    text-align: center;
    color: var(--color-orange);
}

/* 5. MUDANÇA: Responsividade para o novo layout */
@media (max-width: 768px) {
    /* No celular, o card volta a ser vertical */
    .news-card {
        flex-direction: column;
    }

    .news-image {
        width: 100%; /* Imagem ocupa 100% da largura */
        height: 200px; /* Altura maior no celular */
    }
}

/* --- 25. ESTILOS DO MENU MOBILE (SLIDE-DOWN) --- */

.mobile-menu-button {
    display: none; /* Escondido no desktop */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;
    z-index: 1001; /* Fica na frente do header (1000) */
}

.mobile-menu-button .bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--color-orange);
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}

/* Animação para "X" */
.mobile-menu-button.is-active .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
}
.mobile-menu-button.is-active .bar:nth-child(2) {
    opacity: 0;
}
.mobile-menu-button.is-active .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
}

/* --- Media Query para o Menu Mobile --- */
@media (max-width: 768px) {
    
    /* Mostra o botão hambúrguer */
    .mobile-menu-button {
        display: flex;
    }

    /* Garante que a navbar fique na horizontal (logo à esquerda, botão à direita) */
    .navbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Estilo do Menu Mobile */
    .nav-menu {
        display: flex; 
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        gap: 30px;
        padding: 30px 0;
        
        position: fixed;
        z-index: 999; /* Fica ATRÁS do header (1000) e do logo (1002) */
        
        /* Posição logo abaixo do header */
        top: 110px; /* Altura aproximada do header */
        left: 0;
        width: 100%;
        max-height: calc(100vh - 110px); /* Não ultrapassa a altura da tela */
        overflow-y: auto; /* Adiciona scroll se necessário */

        background-color: var(--color-white);
        border-top: 2px solid var(--color-orange);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        
        /* Começa invisível (opacidade 0 e deslocado para cima) */
        opacity: 0;
        transform: translateY(-20px);
        pointer-events: none; /* Impede cliques quando invisível */
        transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    }

    /* Quando o menu está ATIVO */
    .nav-menu.is-active {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto; /* Permite cliques quando visível */
    }

    /* Links do menu mobile maiores e mais espaçados */
    .nav-menu .nav-link {
        font-size: 1.3rem;
        padding: 10px 0;
    }
    
    .nav-menu .btn-outline {
        font-size: 1.2rem;
        padding: 12px 30px;
    }

    /* --- REGRAS DE RESPONSIVIDADE ANTIGAS --- */

    .hero-title {
        font-size: 2.5rem;
    }

    .services-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }
    
    .about-image {
        order: -1;
    }
    
    .job-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .job-card .btn {
        width: 100%;
        text-align: center;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        padding: 25px;
    }
}