@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,600&display=swap');
/* =========================================
   1. RESET E ESTILOS GERAIS
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: #000;
    color: #fff;
    overflow-x: hidden; /* Evita rolagem lateral */
}

/* Efeito de rolagem suave para todo o site */
html {
    scroll-behavior: smooth;
}

/* Tira o sublinhado azul e mantém a cor original do menu */
.menu li a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.menu li a:hover {
    color: #fff;
}

a { text-decoration: none; }

/* =========================================
   2. BARRA DE NAVEGAÇÃO (NAVBAR)
   ========================================= */
.navbar {
/* MUDANÇA AQUI: De 'relative' para 'absolute' */
    position: absolute; 
    top: 0;           /* Cola no teto */
    left: 0;          /* Cola na esquerda */
    width: 100%;      /* Garante largura total */
    
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 60px;
    height: 80px;
    z-index: 100;     /* Garante que fique na frente de tudo */
}

/* LOGO (Fixa na esquerda) */
.logo {
    position: absolute;
    left: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.logo img {
    width: 200px;
    height: auto;
    display: block;
}

/* MENU */
.menu {
    display: flex;
    gap: 60px;
    list-style: none;
    align-items: center;
}

.menu li {
    cursor: pointer;
    font-size: 16px;
    color: #ccc;
    transition: color 0.3s;
}

.menu li:hover { color: #fff; }

/* BOTÃO "GRAB TEMPLATE" */
.btn-outline {
    background-color: #0F0F0F;
    color: #ffffff;
    border: 1px solid #0F0F0F;
    font-family: system-ui, sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 20px;
    border-radius: 99px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: transparent;
    border-color: #ffffff;
}

/* Esconde itens mobile no Desktop */
.hamburger, .close-btn { display: none; }

/* =========================================
   3. SEÇÃO HERO (COM IMAGEM DE FUDO)
   ========================================= */
.hero { /* <-- Não esqueça deste ponto! */
    background: 
        linear-gradient(90deg, 
            rgba(0, 0, 0, 0.95) 0%,  
            rgba(0, 0, 0, 0.80) 40%,  
            rgba(197, 84, 28, 0.7) 100%); 
        
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    
    padding: 0;
    overflow: hidden;
    height: 100vh;
    min-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-top: 80px;
}

.hero-content {
    width: 100%;
    /* max-width: 1280px;  <-- REMOVI ISSO (Isso limitava a largura) */
    /* margin: 0 auto;     <-- REMOVI ISSO (Isso centralizava o bloco) */
    
    padding: 0 60px;       /* Mantém 60px de margem, IGUAL à logo */
    text-align: left;
    z-index: 2;
    margin-bottom: 80px;
}

.hero-text h1 {
    font-size: 64px;
    max-width: 800px;
    margin-bottom: 20px; /* Diminuí um pouco para aproximar do texto */
    line-height: 1.1;
    color: #fff;
    font-weight: 700;
}

/* LINHA FLEXÍVEL (Texto | Botões) */
.hero-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    
    /* REMOVI O 'border-top' DAQUI, A LINHA SUMIU */
    padding-top: 10px; 
}

.hero-row p {
    color: #ccc;
    font-size: 18px;
    max-width: 450px;
    margin: 0;
}

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

/* Estilo "A essência" */
.texto-serif {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 500;
    font-size: 56px; /* Tamanho maior para dar destaque */
    text-transform: none;
}

/* Estilo "EM UMA IMAGEM" */
.texto-caps {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300; /* Bem fina */
    font-size: 16px;  /* Bem menor */
    letter-spacing: 6px; /* Espaçamento bem largo, traz elegância */
    text-transform: uppercase;
    display: block;
    margin-top: 10px; /* Distância entre a palavra de cima e a de baixo */
}

/* Garante que o h1 não bagunce as fontes novas */
.hero-text h1 {
    line-height: 1.1;
    font-size: auto; 
    font-weight: normal; 
}

/* =========================================
   CRIANDO O ESFUMAÇADO NO FUNDO DO HERO
   ========================================= */
.hero::after {
    content: '';
    position: absolute;
    bottom: -2px; /* Cobre a linha perfeitamente */
    left: 0;
    width: 100%;
    height: 200px; /* Altura da transição suave */
    
    /* Puxa as exatas mesmas cores da seção de baixo */
    background: linear-gradient(90deg, #000000 0%, #c5541c 100%);
    
    /* Cria a máscara que faz o esfumaçado transparente para cima */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
    
    pointer-events: none; /* Impede que isso bloqueie cliques */
    z-index: 1; /* Fica acima do fundo, mas abaixo do texto */
}

/* Garante que o carrossel de fotos fique acima do esfumaçado */
.carousel-track {
    position: relative;
    z-index: 2; 
}

/* =========================================
   ESTILO DOS BOTÕES (RECUPERAÇÃO)
   ========================================= */

/* Configuração Geral (Formato) */
.btn-primary, .btn-dark {
    padding: 12px 24px;       /* Tamanho do botão */
    border-radius: 30px;      /* Arredondamento (Pílula) */
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none;    /* Remove sublinhado de link */
    text-align: center;
}

/* Botão Azul (Hire talent) */
.btn-primary { 
    background-color: #4f6bff; 
    color: #ffffff !important; /* !important garante que o texto fique branco */
    border: 1px solid #4f6bff;
}

/* Botão Preto (Consultar orçamento) */
.btn-dark { 
    background-color: #0f0f0f; 
    color: #ffffff !important; 
    border: 1px solid #333; /* Uma borda sutil para destacar do fundo */
}

/* Efeito ao passar o mouse (Hover) */
.btn-primary:hover, .btn-dark:hover {
    transform: translateY(-3px); /* Sobe um pouquinho */
    opacity: 0.9;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra suave */
}

/* --- RESPONSIVIDADE (Mantém igual) --- */
@media (max-width: 900px) {
    .hero-content {
        padding: 0 20px;
        margin-bottom: 40px; /* Menos espaço no celular */
    }

    .hero-text h1 {
        font-size: 42px;
        text-align: center;
        margin-bottom: 30px;
    }

    .hero-row {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 30px;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
    }

    .btn-dark, .btn-primary {
        width: 100%;
    }
}

/* =========================================
   CAIXA DE DESTAQUE (LADO DIREITO DO HERO)
   ========================================= */

/* Atualizando o hero-content para separar os dois lados */
.hero-content {
    width: 100%;
    padding: 0 60px;
    z-index: 2;
    margin-bottom: 80px;
    
    /* MÁGICA AQUI: Coloca lado a lado com espaço no meio */
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    gap: 40px; 
}

/* Protege o lado esquerdo para não esticar demais */
.hero-left {
    max-width: 800px;
    width: 100%;
}

/* LINHA FLEXÍVEL (Agora empilhada: Texto em cima, Botões embaixo) */
.hero-row {
    display: flex;
    flex-direction: column; /* Empilha os elementos verticalmente */
    align-items: flex-start; /* Garante que tudo fique alinhado à esquerda */
    gap: 30px; /* Adiciona um espaço bem elegante entre o texto e os botões */
    width: 100%;
    max-width: 800px; 
    padding-top: 20px;
}

/* =========================================
   CAIXA DE DESTAQUE (LADO DIREITO DO HERO)
   ========================================= */
.hero-destaque {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.destaque-titulo {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.destaque-img-box {
    width: 260px;
    height: 150px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

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

.destaque-img-box:hover img {
    transform: scale(1.05);
}

/* Oculta o destaque no celular para não amontoar */
@media (max-width: 1024px) {
    .hero-content {
        flex-direction: column;
    }
    .hero-destaque {
        display: none;
    }
}

/* =========================================
   4. CARROSSEL (FLUXO NORMAL)
   ========================================= */
.carousel-mask {
    width: 100%;
    /* MUDANÇA: Tiramos o 'absolute' para ele não ficar por baixo do texto */
    position: relative; 
    margin-top: 0;      /* Cola logo depois do texto */
    margin-bottom: 40px; /* Um respiro no final da tela */
    z-index: 1;
}

.carousel-track {
    display: flex;
    gap: 28px;
    width: max-content;
    /* Ajustei a margem para ficar colado na máscara */
    margin: 0; 
    animation: scroll 40s linear infinite;
}

.carousel-track img {
    height: 220px;
    width: auto;
    border-radius: 18px;
    object-fit: cover;
}

@keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* =========================================
   5. SEÇÃO SERVIÇOS
   ========================================= */
.services {
    background: 
        linear-gradient(to bottom, rgba(0,0,0,0) 0%, #000000 50%, #000000 100%),
        linear-gradient(90deg, #000000 0%, #c5541c 100%);
    padding: 60px 60px 100px 60px;
    color: #fff;
}

/* CORREÇÃO DE ALINHAMENTO: Largura total para alinhar com o topo */
.services-container { 
    max-width: 100%; 
    margin: 0; 
    width: 100%;
}

.services-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1400px; /* Limite suave para leitura */
}

/* Agrupamento dos botões de Serviços */
.services-buttons {
    display: flex;
    gap: 20px; /* Controla a distância exata entre um botão e outro */
    align-items: center;
}

/* Para garantir que no celular eles não fiquem espremidos */
@media (max-width: 768px) {
    .services-buttons {
        flex-direction: column; /* Empilha os botões no celular */
        width: 100%;
        margin-top: 20px;
    }

    .services-buttons a {
        width: 100%;
        text-align: center;
    }
}

.label {
    color: #4f6bff;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.services-info h2 { font-size: 48px; font-weight: 500; margin-bottom: 15px; }
.services-info p { color: #999; font-size: 18px; max-width: 600px; }

/* GALERIA (3 RETÂNGULOS) */
.media-box {
    background: transparent;
    border: none;
    height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    width: 100%;
}

.gallery-item {
    position: relative;
    height: 450px;
    border-radius: 16px;
    overflow: hidden;
    background-color: #0F0F0F;
    cursor: pointer;
}

.gallery-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.gallery-info h3 { font-size: 18px; color: #fff; margin-bottom: 5px; }
.gallery-info p { font-size: 12px; color: #4f6bff; text-transform: uppercase; font-weight: bold; }

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
    transition: transform 0.4s ease;
}

.gallery-item:hover img { transform: translateY(-80px); }

/* =========================
   NOVA SEÇÃO PORTFÓLIO (PROJETOS RECENTES)
   ========================= */
.portfolio-section {
    background-color: #000; /* Mantém o fundo preto como solicitado */
    padding: 100px 60px;
    border-top: 1px solid #111;
}

.portfolio-container {
    max-width: 1280px;
    margin: 0 auto;
}

.portfolio-header {
    text-align: center;
    margin-bottom: 60px;
}

.portfolio-header h2 {
    font-size: 48px;
    color: #fff;
    margin: 15px 0;
}

.portfolio-header p {
    color: #999;
    font-size: 18px;
}

/* Grid de 3 Colunas */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* O CARD */
.portfolio-card {
    background-color: #050505;
    border: 1px solid #222;
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.portfolio-card:hover {
    border-color: #4f6bff;
    transform: translateY(-5px);
}

/* Cabeçalho do Card (Ícone e Destaque) */
.card-top-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 25px;
}

.card-icon {
    font-size: 28px; /* Tamanho do emoji/ícone */
}

.card-tags {
    text-align: right;
}

.card-tags h4 {
    font-size: 15px;
    color: #fff;
    margin-bottom: 8px;
}

.badge-pill {
    background-color: #111;
    color: #4f6bff;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    border: 1px solid #222;
}

/* Textos Centrais */
.card-text-info {
    text-align: center;
    margin-bottom: 20px;
}

.card-text-info h3 {
    font-size: 22px;
    color: #fff;
    margin-bottom: 8px;
}

.card-text-info p {
    color: #888;
    font-size: 13px;
}

/* Caixa da Imagem */
.card-image-box {
    width: 100%;
    height: 180px; /* Altura padrão para todas as imagens ficarem iguais */
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}

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

.portfolio-card:hover .card-image-box img {
    transform: scale(1.05); /* Efeito de zoom na foto ao passar o mouse no card */
}

/* RESPONSIVIDADE DO PORTFÓLIO */
@media (max-width: 900px) {
    .portfolio-grid {
        grid-template-columns: 1fr; /* 1 coluna no celular */
    }
    
    .portfolio-section {
        padding: 60px 20px;
    }
    
    .portfolio-header h2 {
        font-size: 32px;
    }
}

/* =========================
   SEÇÃO DEPOIMENTOS (VÍDEOS EM STACK)
   ========================= */
.testimonials-section {
    background-color: #000;
    padding: 100px 60px;
    border-top: 1px solid #111;
    overflow: hidden; /* Evita que os cards vazem da tela nas animações */
}

.testimonials-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

/* --- LADO ESQUERDO: PILHA DE VÍDEOS --- */
.video-stack {
    position: relative;
    width: 450px;
    height: 550px;
    /* Centraliza no mobile */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* O Retângulo Base (O Vídeo) */
.video-card {
    position: absolute;
    width: 260px;
    height: 460px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Imagem de Capa do Vídeo */
.video-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
    transition: filter 0.3s ease;
    /* Esconde os controles por padrão para os vídeos de trás */
    opacity: 0.8;
}

/* Clareia o vídeo quando passa o mouse */
.video-card:hover video {
    filter: brightness(1); 
}

/* Posições Iniciais dos Cards */
.card-1 {
    left: 0;
    top: 40px;
    z-index: 3;
    transform: rotate(-5deg);
}

.card-2 {
    left: 80px;
    top: 20px;
    z-index: 2;
    transform: rotate(0deg);
}

.card-3 {
    left: 160px;
    top: 0;
    z-index: 1;
    transform: rotate(5deg);
}

/* A MÁGICA: Ao passar o mouse, o card vem para frente e endireita */
.video-card:hover {
    z-index: 10 !important;
    transform: scale(1.05) translateY(-20px) rotate(0deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.9);
}

.video-card:hover video {
    filter: brightness(1); /* Clareia o vídeo */
    opacity: 1; /* Tira a opacidade para ficar bem nítido */
}

/* TRUQUE DOS CONTROLES:
   Desabilita a interação com o vídeo (para não conflitar com o hover) 
   quando ele NÃO está em evidência.
*/
.video-card video {
    pointer-events: none; 
}

/* Habilita o clique no botão de som/play apenas quando passa o mouse */
.video-card:hover video {
    pointer-events: auto;
}

/* =========================================
   CUSTOMIZAÇÃO DO PLAYER DE VÍDEO NATIVO
   ========================================= */

/* Força a remoção do botão de tela cheia (Chrome, Safari, Edge) */
video::-webkit-media-controls-fullscreen-button {
    display: none !important;
}

/* Opcional: Para deixar o player com um visual um pouco mais limpo */
video::-webkit-media-controls-enclosure {
    border-radius: 0;
}

/* --- LADO DIREITO: TEXTOS --- */
.testimonials-text {
    max-width: 500px;
}

.testimonials-text h2 {
    font-size: 56px;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 20px;
}

.testimonials-text p {
    color: #999;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
}

.quote-highlight {
    background: #0a0a0a;
    border-left: 4px solid #4f6bff;
    padding: 30px;
    border-radius: 0 16px 16px 0;
    margin-bottom: 40px;
}

.quote {
    color: #fff !important;
    font-size: 16px !important;
    font-style: italic;
    margin-bottom: 15px !important;
}

.quote-author h4 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 4px;
}

.quote-author span {
    color: #555;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1024px) {
    .testimonials-container {
        flex-direction: column-reverse; /* Coloca o texto em cima e os vídeos embaixo no celular */
        text-align: center;
        gap: 40px;
    }

    .testimonials-text {
        max-width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .quote-highlight {
        text-align: left; /* Mantém o balão de citação organizado */
    }

    /* Reduz um pouco o tamanho no celular para caber na tela */
    .video-stack {
        width: 100%;
        max-width: 350px;
        height: 450px;
    }

    .video-card {
        width: 200px;
        height: 350px;
    }
    
    .card-1 { left: 0; }
    .card-2 { left: 50px; }
    .card-3 { left: 100px; }
}

/* =========================
   SEÇÃO FUNDADOR (AUTORIDADE OVERLAY)
   ========================= */
.founder-section {
    background-color: #000;
    padding: 100px 60px;
    border-top: 1px solid #111;
}

.founder-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Caixa da Imagem (Agora serve como âncora para o texto) */
.founder-image-box {
    position: relative; /* O segredo para o texto flutuar aqui dentro */
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); 
}

.founder-image-box img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Texto Flutuante por cima da imagem */
.founder-header-overlay {
    position: absolute;
    top: 40px; /* Controla a distância do texto para o topo da foto */
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10; /* Garante que fique na frente da foto */
}

.founder-header-overlay .label-blue {
    color: #4f6bff;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 10px;
}

.founder-header-overlay h2 {
    font-size: 48px;
    color: #fff;
    margin: 0 0 10px 0;
    /* Sombra pesada para o texto não sumir no fundo da foto */
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.9); 
}

.founder-header-overlay p {
    color: #ddd;
    font-size: 18px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
}

/* ==========================================
   AJUSTES DE CELULAR: SEÇÃO FUNDADOR
   ========================================== */
@media (max-width: 768px) {
    .founder-section {
        padding: 60px 20px; /* Espaçamento geral da seção nas laterais */
    }

    /* 1. O Texto: Sai do modo flutuante e assume o topo */
    .founder-header-overlay {
        position: relative; 
        top: 0;
        margin-bottom: 40px; /* Cria o respiro exato entre o texto e a foto */
        text-shadow: none; /* Remove a sombra para o texto ficar mais nítido no fundo preto */
    }

    .founder-header-overlay .label-blue {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .founder-header-overlay h2 {
        font-size: 32px;
        margin-bottom: 12px;
        line-height: 1.2;
    }

    .founder-header-overlay p {
        font-size: 16px;
        color: #b3b3b3; /* Cor cinza exata da sua imagem de referência */
        max-width: 100%; 
    }

    /* 2. A Foto: Assume o tamanho real sem cortes */
    .founder-image-box {
        position: relative;
        min-height: auto; 
        border-radius: 16px; /* Arredonda as pontas da caixa */
        box-shadow: none; /* Remove sombras extras no mobile para visual mais flat */
    }

    .founder-image-box img {
        height: auto; /* Deixa a imagem crescer proporcionalmente */
        object-fit: contain; /* Impede que qualquer parte da foto seja cortada */
        border-radius: 16px; /* Arredonda as pontas da foto em si */
    }
}

/* =========================
   RODAPÉ (FOOTER)
   ========================= */
.final-footer {
    /* Degradê do Preto (topo) para Laranja/Marrom escuro (base) */
    background: linear-gradient(to bottom, #000000 0%, #8a3800 100%);
    padding: 60px 60px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alinha tudo ao centro na vertical */
}

/* Lado Esquerdo e Direito (Logos) */
.footer-left img {
    height: 70px; /* Ajuste a altura da logo esquerda conforme precisar */
    width: auto;
}

.footer-right img {
    height: 50px; /* Ajuste a altura da logo da direita conforme precisar */
    width: auto;
}

/* Centro (Links em 2 colunas) */
.footer-center {
    display: flex;
    gap: 50px; /* Espaço entre a coluna do whatsapp e a de serviços */
}

.footer-links-col {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espaço vertical entre um link e outro */
}

.footer-links-col a {
    color: #b3b3b3;
    text-decoration: none;
    font-size: 16px;
    transition: color 0.3s ease;
    /* Deixa os links em minúsculo igual à sua referência */
    text-transform: lowercase; 
}

.footer-links-col a:hover {
    color: #ffffff; /* Fica branco ao passar o mouse */
}

/* Responsividade (Para Celulares) */
@media (max-width: 768px) {
    .final-footer {
        padding: 50px 20px;
    }

    .footer-container {
        flex-direction: column; /* Empilha tudo */
        gap: 40px;
        text-align: center;
    }

    .footer-center {
        gap: 40px;
        justify-content: center;
    }
    
    .footer-links-col {
        align-items: center;
    }
}

/* =========================================
   8. RESPONSIVIDADE TOTAL (CELULAR/TABLET)
   ========================================= */
@media (max-width: 900px) {
    .pricing-grid { flex-direction: column; align-items: center; }
    .pricing-card { width: 100%; max-width: 100%; }
    .pricing-section { padding: 60px 20px; }
}

@media (max-width: 768px) {
    
    /* =========================================
       1. CABEÇALHO (LOGO E MENU) PERFEITAMENTE ALINHADOS
       ========================================= */
    .navbar { 
        display: flex;
        position: absolute; /* Gruda a barra no teto da tela */
        top: 0;
        left: 0;
        height: 90px; /* Altura um pouco maior para dar respiro */
        width: 100%;
        z-index: 100; /* Garante que fique na frente da foto */
    }

    .logo { 
        position: absolute;
        left: 50%;
        top: 50%; 
        transform: translate(-50%, -50%); 
    }

    .logo img { 
        width: 140px; 
        display: block;
    }

    /* --- MENU MOBILE TELA CHEIA (MANTIDO DO SEU CÓDIGO) --- */
    .menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100vh;
        background-color: #000;
        z-index: 9998;
        transition: 0.5s ease;
        margin: 0 !important;
        padding: 0;
    }
    .menu.active { left: 0; }
    .menu li { margin: 20px 0; font-size: 24px; }

    /* --- ÍCONES DO MENU (MANTIDO E AJUSTADO) --- */
    .hamburger { 
        display: block; 
        position: absolute; 
        right: 25px; /* Distância da borda direita */
        top: 50%; /* Fica na exata mesma linha da logo */
        transform: translateY(-50%); 
        z-index: 9999; 
        cursor: pointer;
    }
    .close-btn { 
        display: block; 
        position: absolute; 
        top: 30px; 
        right: 30px; 
        font-size: 40px; 
        cursor: pointer; 
        z-index: 10000; 
    }
    .bar { 
        display: block; 
        width: 25px; 
        height: 3px; 
        margin: 5px auto; 
        background-color: white; 
        transition: 0.3s; 
    }

    /* =========================================
       2. REORDENAÇÃO MÁGICA DO HERO
       ========================================= */
    .hero {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding-top: 100px;
        padding-bottom: 40px; 
        height: 100vh;
    }
    .hero-content, .hero-left, .hero-row {
        display: contents; 
    }

    /* =========================================
       3. TEXTO DESCENDO ("A essência...")
       ========================================= */
    .hero-text {
        order: 1;
        margin-top: auto;
        text-align: center;
        z-index: 2;
    }
    .hero-text h1 {
        font-size: 38px;
        margin-bottom: 15px;
    }
    .hero-row p { display: none; }

    /* =========================================
       4. TRANSFORMANDO O CARROSSEL EM 3 FOTOS
       ========================================= */
    .carousel-track {
        order: 2;
        animation: none;
        display: flex;
        justify-content: center;
        gap: 10px;
        width: 100%;
        padding: 0 15px;
        margin-bottom: 25px;
        z-index: 3;
    }
    .carousel-track a { display: none; flex: 1; }
    
    /* Mostra apenas as 3 primeiras fotos */
    .carousel-track a:nth-child(1),
    .carousel-track a:nth-child(2),
    .carousel-track a:nth-child(3) {
        display: block;
    }
    .carousel-track img {
        width: 100%;
        height: 170px;
        border-radius: 16px;
        object-fit: cover;
    }

    /* =========================================
       5. BOTÕES LADO A LADO E MENORES
       ========================================= */
    .hero-buttons {
        order: 3;
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 15px;
        width: 100%;
        z-index: 3;
    }
    .btn-primary, .btn-dark { 
        width: auto;
        padding: 12px 20px; 
        font-size: 13px;
        text-align: center; 
    }

/* =========================================
       6. SEÇÃO SERVIÇOS (EXATAMENTE COMO A REFERÊNCIA)
       ========================================= */
    .services { 
        padding: 60px 20px; 
    }
    
    /* Prepara a caixa principal para reordenar as coisas */
    .services-container {
        display: flex;
        flex-direction: column;
    }

    /* "Desmancha" o cabeçalho para podermos separar o texto dos botões */
    .services-header { 
        display: contents; 
    }

    /* --- 1. TEXTOS NO TOPO --- */
    .services-info {
        order: 1; /* Fica em primeiro */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 40px;
    }

    .services-info h2 { 
        font-size: 20px; /* Tamanho ajustado para o celular */
        margin-bottom: 15px;
    }

    .services-info p {
        font-size: 15px; /* <-- Parágrafo travado em 15px no celular */
    }

    /* --- 2. FOTOS NO MEIO (ESTILO PÍLULA) --- */
    .media-box { 
        order: 2; /* Fica no meio */
        display: flex;
        flex-direction: column;
        gap: 20px; 
        margin-bottom: 40px; 
    }

    .gallery-item { 
        height: 120px; /* Deixa a foto bem achatada/horizontal */
        border-radius: 80px; /* Arredonda as pontas estilo pílula */
        overflow: hidden;
    }

    /* Esconde os textos que ficavam por cima das fotos originais */
    .gallery-info {
        display: none; 
    }

    .gallery-item::after {
        display: none; /* Remove aquela sombra preta que criamos antes */
    }

    /* Trava a imagem para não subir ao tocar na tela do celular */
    .gallery-item:hover img {
        transform: none;
    }

    /* --- 3. BOTÕES LÁ NO FINAL --- */
    .services-buttons {
        order: 3; /* Vai lá pro fundo, depois das fotos */
        display: flex;
        flex-direction: row; /* Coloca os dois botões lado a lado */
        justify-content: center;
        gap: 15px;
        width: 100%;
        margin-top: 0;
    }

    .services-buttons .btn-primary, 
    .services-buttons .btn-dark {
        width: auto;
        padding: 12px 20px;
        font-size: 12px;
    }

    /* --- FOOTER MOBILE (MANTIDO DO SEU CÓDIGO) --- */
    .footer { padding: 60px 20px; text-align: center; }
    .footer-container { grid-template-columns: 1fr; gap: 40px; }
    .footer-col p { margin: 0 auto; }
    .footer-logo img { margin: 0 auto 20px auto; display: block; }
}

/* =========================================
       7. SEÇÃO PORTFÓLIO (AJUSTES MOBILE - MAIS ESTREITO)
       ========================================= */
    .portfolio-section {
        padding: 60px 0; /* Tiramos o respiro daqui para controlar direto no card */
    }

    .portfolio-card {
        border: 1px solid rgba(255, 255, 255, 0.6); /* Borda branca um pouco mais suave */
        padding: 25px 20px; /* Espaço interno */
        border-radius: 40px; /* Aumenta bastante o arredondamento (igual à referência) */
        background-color: transparent; /* Deixa transparente para mesclar com o fundo */
        margin: 0 35px; /* A MÁGICA AQUI: Afasta o card 35px de cada lateral da tela */
    }

    /* Ajusta a foto interna para acompanhar o novo tamanho do card */
    .card-image-box {
        height: 170px; /* Deixa a foto um pouco mais baixa para não achatar */
        margin-bottom: 20px;
        border-radius: 16px; /* Arredonda mais as pontas da foto em si */
    }

    .card-top-info {
        margin-bottom: 15px;
    }

    .card-text-info h3 {
        font-size: 20px; 
    }

    /* =========================================
       8. SEÇÃO DEPOIMENTOS (AJUSTES MOBILE TEXTOS)
       ========================================= */
    .testimonials-text {
        text-align: center;
        width: 100%;
    }

    /* Deixa o "DEPOIMENTOS" em evidência com a cor azul */
    .testimonials-text .label-blue {
        color: #4f6bff; /* O tom de azul do seu site */
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 10px;
        display: block; 
    }

    /* Reduz drasticamente o título para caber bonitinho (em 1 ou 2 linhas max) */
    .testimonials-text h2 {
        font-size: 27px; 
        line-height: 1.2;
        margin-bottom: 15px;
    }

    /* Ajusta o texto do parágrafo para ficar menor e elegante */
    .testimonials-text p {
        font-size: 14px; 
        line-height: 1.5;
        color: #999;
        padding: 0 15px; /* Evita que o texto encoste totalmente nas bordas da tela */
    }

/* =========================
   RESPONSIVIDADE (CELULAR)
   ========================= */
@media (max-width: 900px) {
    .exclusive-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-text h2 {
        font-size: 36px;
    }

    .exclusive-content {
        grid-template-columns: 1fr; /* Vira uma coluna só */
        gap: 40px;
    }

    .feature-image-box {
        height: 400px;
        order: -1; /* Joga a imagem para cima da lista no celular (opcional) */
    }
    
    .exclusive-section {
        padding: 60px 20px;
    }
}

/* Botão Esticado (Largura total) */
.btn-primary.full-width {
    display: block; /* Ocupa a linha toda */
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
}

/* =========================
   SEÇÃO DEPOIMENTOS (TESTIMONIALS)
   ========================= */
.testimonials-section {
    background-color: #000;
    padding: 100px 60px;
    border-top: 1px solid #111; /* Linha de separação */
}

.testimonials-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Cabeçalho Centralizado */
.testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}

.testimonials-header h2 {
    font-size: 48px;
    color: #fff;
    margin: 15px 0;
    line-height: 1.1;
}

.testimonials-header p {
    color: #999;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

/* Grid 2x2 (Duas colunas) */
.testimonials-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide em 2 partes iguais */
    gap: 30px;
}

/* Cartão de Depoimento */
.testimonial-card {
    background-color: #080808; /* Um preto levemente diferente do fundo */
    border: 1px solid #222;
    border-radius: 24px;       /* Cantos bem arredondados */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;         /* Altura mínima para ficarem iguais */
    transition: all 0.3s ease;
}

/* Efeito Hover (Borda Azul) */
.testimonial-card:hover {
    border-color: #4f6bff;
    transform: translateY(-5px);
    background-color: #0F0F0F;
}

/* Texto do Depoimento */
.quote-text {
    font-size: 18px;
    color: #ccc;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Info do Cliente (Nome e Serviço) */
.client-info h4 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 5px;
}

.client-info span {
    color: #555;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}

/* RESPONSIVIDADE */
@media (max-width: 900px) {
    .testimonials-grid {
        grid-template-columns: 1fr; /* Vira 1 coluna no celular */
    }

    .testimonials-section {
        padding: 60px 20px;
    }

    .testimonials-header h2 {
        font-size: 32px;
    }
}

/* =========================
   SEÇÃO EQUIPE (TEAM)
   ========================= */
.team-section {
    background-color: #000;
    padding: 100px 60px;
    border-top: 1px solid #111;
}

.team-container {
    max-width: 1280px;
    margin: 0 auto;
}

/* Cabeçalho igual aos outros */
.team-header {
    text-align: center;
    margin-bottom: 60px;
}

.team-header h2 {
    font-size: 48px;
    color: #fff;
    margin: 15px 0;
}

.team-header p {
    color: #999;
    font-size: 18px;
}

/* Grid */
.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas */
    gap: 30px;
}

/* Card do Profissional */
.team-card {
    background-color: #050505; /* Fundo quase preto */
    border: 1px solid #222;
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espaço entre as partes do card */
    transition: transform 0.3s ease;
}

.team-card:hover {
    border-color: #4f6bff;
    transform: translateY(-5px);
}

/* Topo: Foto + Nome */
.profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-img {
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Faz a foto ficar redonda */
    object-fit: cover;
    border: 2px solid #333;
}

.profile-info h3 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 5px;
}

.profile-info span {
    font-size: 11px;
    color: #888;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: bold;
}

/* Linha de Estatísticas (Meio) */
.stats-row {
    display: flex;
    justify-content: space-between; /* Espalha os 3 itens */
    padding: 15px 0;
    border-top: 1px solid #1a1a1a;
    border-bottom: 1px solid #1a1a1a;
}

.stat-item {
    text-align: center;
    flex: 1; /* Cada um ocupa o mesmo espaço */
}

.stat-item strong {
    display: block;
    font-size: 24px;
    color: #fff;
    margin-bottom: 5px;
}

.stat-item span {
    font-size: 12px;
    color: #666;
}

/* Botão Full Width já configuramos antes, 
   mas garanta que ele tenha margem zero aqui se precisar */
.team-card .btn-primary {
    margin-bottom: 0;
}

/* RESPONSIVIDADE */
@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: 1fr; /* 1 por linha no celular */
    }
    
    .team-section {
        padding: 60px 20px;
    }
}

/* =========================
   RODAPÉ FINAL (DEGRADÊ PRETO PARA AZUL)
   ========================= */
.final-footer {
    /* A MUDANÇA MÁGICA ESTÁ AQUI: */
    /* Começa preto (#000) no topo e termina no seu azul (#4f6bff) embaixo */
    background: linear-gradient(to bottom, #000000 0%, #8a3800 100%);
    
    padding: 100px 60px 40px 60px;
    color: #fff;
    overflow: hidden;
    border-top: none; /* Sem borda para o degradê fluir */
}

.footer-content {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 60px;
    margin-bottom: 80px;
}

/* LADO ESQUERDO */
.footer-brand {
    max-width: 500px;
}

.brand-desc {
    color: #e6e6ff;
    font-size: 16px;
    margin-bottom: 20px;
}

.big-logo {
    font-size: 90px;
    font-weight: bold;
    letter-spacing: -3px;
    line-height: 1;
    color: #ffffff;
    text-transform: lowercase;
}

/* LADO DIREITO (Links) */
.footer-links {
    display: flex;
    gap: 80px;
}

.link-column {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.link-column a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.link-column a:hover {
    opacity: 0.7;
}

/* RODAPÉ DO RODAPÉ (Copyright) */
.footer-bottom {
    text-align: center;
    /* Linha divisória sutil e transparente */
    border-top: 1px solid rgba(255, 255, 255, 0.15); 
    padding-top: 40px;
    color: #e6e6ff;
    font-size: 14px;
}

/* =========================
   RESPONSIVIDADE (CELULAR)
   ========================= */
@media (max-width: 900px) {
    .final-footer {
        padding: 60px 20px;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }

    .big-logo {
        font-size: 60px;
    }

    .footer-links {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
}

.carousel-track a img {
    cursor: pointer; /* Garante que apareça a mãozinha do mouse */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.carousel-track a:hover img {
    transform: scale(1.05); /* Aumenta levemente a foto */
    filter: brightness(1.1); /* Deixa um pouco mais brilhante */
}