html {
    scroll-behavior: smooth;
}
* {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
       font-family:"Inter",sans-serif;
       
}

body {
    background-color: #0B0B0D;
    color: white;
}
/* =========================================
   HEADER FLUTUANTE (VIDRO FOSCO)
========================================= */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #555454;
    width: 90%;
    min-height: 70px; /* Alterado de height para min-height para permitir expansão */
    max-width: 800px; 
    border-radius: 15px;
    padding: 10px 24px;
    
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    
    background-color: rgba(11, 11, 13, 0.8); 
    backdrop-filter: blur(10px); 
    -webkit-backdrop-filter: blur(10px);
}

.nav-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 20px;
}

.nav-header ul {
    display: flex;
    list-style: none;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.nav-header ul li a {
    color: #A1A1AA;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
}

.nav-header ul li a:hover {
    color: white;
}

/* O Botão de Analisar Negócio */
.btn-header {
    font-weight: 600;
    background-color: white;
    color: black;
    text-decoration: none;
    padding: 10px 24px;
    border-radius: 12px;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Impede o texto do botão de quebrar em duas linhas */
    text-align: center;
}

.btn-header:hover {
    background-color: #E5E7EB; 
}

/* =========================================
   MODO CELULAR (TUDO VISÍVEL E EMPILHADO)
========================================= */
@media (max-width: 768px) {
    header {
        padding: 15px; 
        border-radius: 20px;
    }

    .nav-header {
        flex-direction: row; /* Força a divisão Lado Esquerdo vs Lado Direito */
        justify-content: space-between;
        align-items: center;
        gap: 10px; /* Um pequeno respiro entre os links e o botão */
    }

    .nav-header ul {
        flex-direction: column; /* Empilha SÓ os links de texto do lado esquerdo */
        align-items: flex-start;
        gap: 10px;
    }

    .nav-header ul li a {
        font-size: 0.85rem; /* Letra um pouco menor para caber bonito */
    }

    .btn-header {
        width: auto; /* Remove o esticamento do botão */
        padding: 12px 16px;
        font-size: 0.85rem; /* Diminui a fonte do botão para não vazar da tela */
        text-align: center;
        
        /* Permite que o texto do botão quebre em duas linhas se o celular for muito pequeno 
           (Ex: "analisar" em cima e "negócio" embaixo) */
        white-space: normal; 
        line-height: 1.2;
    }
}
main#ajuste {
    padding-top: 140px; 
    
    /* Opcional: já ajuda a centralizar o conteúdo do site inteiro */
    display: flex;
    flex-direction: column;
    align-items: center;
}
ul {
     display: flex;
     list-style: none;
     gap: 30px;

}
li a {
     color: #A1A1AA;
      text-decoration: none;
      all: unset;
      cursor: pointer;
}
a:hover {
     color: white;
     transition: background-color 0.3s ease
}
#btn-header {
      position: absolute;
      right: 20px;
}
#btn-header a {
    font-weight: 600;
    background-color: white;
    color: black;
    cursor: pointer;
    padding: 10px 24px;
    border-radius: 12px;
    transition: background-color 0.3s ease;
}
#btn-header a:hover {
      background-color: #E5E7EB; 
}


nav {
        display: flex;
        flex-direction: column;
        align-items: center;

}
.btn--primary {
       
      text-decoration: none;
       all: unset;
       background-color: #F5AD0B;
       padding: 15px;
       border-radius: 30px;

}
a.btn--primary {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 12px; /* O espaço exato entre a última letra e a seta */
        color: #0B0B0D;
        font-weight: 700;
        font-size: 1.1rem;
}
span.btn-arrow {
        background-color: white;
        padding: 10px;
        border-radius: 50%;
}
.btn-arrow img {
    width: 20px; /* Ajuste esse valor para o tamanho que ficar mais harmônico */
    height: auto;
    display: block; /* Tira um espacinho em branco invisível que o HTML coloca sob imagens */
}
/* 1. O botão inteiro sobe e ganha o brilho amarelo (Glow) */
.btn--primary:hover {
    transform: translateY(-3px) scale(1.02); /* Sobe 3px e cresce 2% */
    box-shadow: 0 12px 25px rgba(245, 173, 11, 0.4); /* Sombra difusa da mesma cor do botão */
    background-color: #FFBC1F; /* Fica um tom minimamente mais claro ao passar o mouse */
}

/* 2. A bolinha branca desliza para a direita indicando "Próximo Passo" */
.btn--primary:hover .btn-arrow {
    transform: translateX(6px);
}

/* Efeito extra: Clica no botão (Active) */
.btn--primary:active {
    transform: translateY(0) scale(0.98); /* Dá um efeito de "amassar" ao clicar de verdade */
    box-shadow: 0 2px 5px rgba(245, 173, 11, 0.4);
}
span.highlight {
    color: #F5AD0B;
}
h1 {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    text-align: center;
    max-width: 850px; /* Impede que o texto estique de ponta a ponta em monitores muito grandes */
    margin: 0 auto 20px auto;
}
/* =========================================
   SEÇÃO: VSL (VÍDEO DE VENDAS) - ESTILO ADS STUDIO
========================================= */
      /* =========================================
   SEÇÃO: VSL (VÍDEO DE VENDAS) - VERTICAL
========================================= */
div#Video {
    width: 90%; 
    /* AQUI ESTÁ O SEGREDO: Reduzimos a caixa para 400px (tamanho de um celular na tela) */
    max-width: 400px; 
    margin: 40px auto; 
    
    display: flex;
    justify-content: center; 
    align-items: center;
    
    padding: 20px; /* Borda de vidro um pouco mais delicada */
    background-color: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 24px; 
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); 
}

div#Video iframe {
    width: 100%; 
    height: auto; /* Deixa a altura se ajustar automaticamente */
    
    /* Força o navegador a manter aquele formato 1080x1920 que você gostou */
    aspect-ratio: 9 / 16; 
    
    border: none;
    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.9); 
}

/* Ajuste maximizado para o celular */
@media (max-width: 768px) {
    div#Video {
        width: 95%; /* No celular ele volta a ocupar a tela quase toda */
        max-width: none; 
        padding: 8px; 
        margin: 30px auto; 
        border-radius: 20px;
    }

    div#Video iframe {
        border-radius: 14px; 
    }
}

/* =========================================
   CARROSSEL DE LOGOS (MARQUEE INFINITO)
========================================= */

.clients-ticker__container {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1000px;
    margin: 80px 0; /* Espaçamento do bloco em relação aos outros elementos */
    gap: 40px; /* Distância entre o texto e o carrossel */
}

/* O Texto da Esquerda */
.clients-ticker__header {
    flex-shrink: 0; 
    width: 220px;
    border-right: 2px solid #333; /* Linha divisória charmosa entre texto e carrossel */
    padding-right: 20px;
}

.clients-ticker__header p {
    font-size: 0.95rem;
    line-height: 1.4;
}

.clients-ticker__header strong {
    color: white; /* Dá um leve destaque na palavra estruturada */
}

/* A Janela do Carrossel */
.clients-ticker__marquee {
    flex-grow: 1; /* Ocupa todo o resto da tela */
    overflow: hidden; /* Corta as imagens que passarem do limite */
    position: relative;
    
    /* Efeito Premium: Um degradê que faz os logos sumirem suavemente nas pontas */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* A Trilha que vai se mover */
.clients-ticker__track {
    display: flex;
    align-items: center;
    gap: 80px; /* Espaço entre cada logo */
    width: max-content; /* Obriga os logos a ficarem todos numa linha só */
    animation: scroll-logos 30s linear infinite; /* Animação linear constante */
}

/* Opcional: Pausa o carrossel se o usuário passar o mouse por cima */
.clients-ticker__track:hover {
    animation-play-state: paused;
}

/* O visual dos logos */
.clients-ticker__logo {
   height: 150px; /* Altura máxima da caixa do logo */
    width: 190px; /* Largura máxima (segura os logos que são muito compridos) */
    object-fit: contain; /* A MÁGICA: faz a imagem caber na caixa perfeitamente sem esticar */
    flex-shrink: 0; /* Impede que o carrossel (Flexbox) tente esmagar as imagens */
    
    /* Filtro B2B */
    filter: grayscale(100%) opacity(0.6); 
    transition: filter 0.3s ease;
}

/* Acende o logo ao passar o mouse */
.clients-ticker__logo:hover {
    filter: grayscale(0%) opacity(1);
}

/* === A MÁGICA DA ANIMAÇÃO === */
@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }
    100% {
        /* Desloca exatamente a metade da div (o primeiro set de logos inteiro) */
        transform: translateX(-50%);
    }
}

/* === RESPONSIVO (MOBILE) === */
@media (max-width: 768px) {
    .clients-ticker__container {
        flex-direction: column; /* Coloca o texto em cima e o carrossel embaixo */
        gap: 20px;
    }
    
    .clients-ticker__header {
        width: 100%;
        border-right: none;
        border-bottom: 2px solid #333; /* A divisória passa a ser deitada */
        text-align: center;
        padding-right: 0;
        padding-bottom: 15px;
    }
    
    /* No celular, os cantos cortam mais rápido, então ajustamos o fade */
    .clients-ticker__marquee {
        width: 100vw;
        max-width: 100%;
    }
}
/* =========================================
   SEÇÃO: COMO FUNCIONA (TIMELINE)
========================================= */

.timeline__container {
    width: 100%;
    max-width: 1000px;
    margin: 100px auto; /* Dá um bom respiro da VSL até aqui */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline__title {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 80px;
}

.highlight-yellow {
    color: #F5AD0B; /* O mesmo amarelo do seu botão */
}

/* O "esqueleto" que segura tudo */
.timeline__wrapper {
    position: relative;
    width: 100%;
    max-width: 850px;
    display: flex;
    flex-direction: column;
    gap: 40px; /* Distância vertical entre os passos */
}

/* A Linha Central */
.timeline__line-bg {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background-color: #2A2A2E; /* Um cinza um pouco mais claro que o fundo pra dar contraste */
    z-index: 1;
}

/* === A NOVA BARRA DE PROGRESSO BRANCA === */
.timeline__line-progress {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2px; /* Mesma espessura da linha de fundo */
    background-color: #FFFFFF; /* A cor branca que você pediu */
    height: 0%; /* O JavaScript vai aumentar isso conforme o scroll */
    z-index: 1;
    
    /* Efeito Premium: Um leve brilho na linha enquanto ela desce */
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5); 
}

/* Container de cada passo (Engloba o Número e o Card) */
.timeline__step {
    position: relative;
    display: flex;
    width: 100%;
    align-items: flex-start; /* Alinha o card pelo topo */
}

/* Intercalando Esquerda e Direita */
.timeline__step--right { justify-content: flex-end; }
.timeline__step--left { justify-content: flex-start; }

/* Os Números Gigantes (01, 02...) */
.timeline__marker {
    position: absolute;
    left: 50%;
    transform: translateX(-50%); /* Crava o número exatamento no meio da linha */
    top: 0; /* Alinha com o topo do card */
    
    background-color: #0B0B0D; /* COR CRÍTICA: Mesma cor do background do site para criar o efeito de "corte" na linha */
    padding: 10px 0;
    
    font-size: 3rem;
    font-weight: 800;
    color: #FFFFFF;
    z-index: 2;
}

/* =========================================
   OS CARDS DE CONTEÚDO
========================================= */

.timeline__card {
    /* O SEGREDO DO LAYOUT: Pega metade da tela (50%) e tira 60px para não encostar no número */
    width: calc(50% - 60px); 
    
    background-color: #121214; /* Fundo do card levemente mais claro que o fundo do site */
    border: 1px solid #2A2A2E;
    border-radius: 20px;
    padding: 32px;
    
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.timeline__card-title {
 position: relative; /* Transforma o título na âncora da linha */
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    color: #FFFFFF;
    
    padding-bottom: 20px; 
    margin-bottom: 20px;

}
/* === A LINHA DE PONTA A PONTA === */
.timeline__card-title::after {
    content: ''; /* Cria um elemento vazio no HTML */
    position: absolute;
    bottom: 0; /* Cola a linha no limite do padding-bottom */
    
    /* A Mágica: Empurra a linha para fora do limite do texto e estica ela */
    left: -32px; /* O mesmo valor do padding do .timeline__card */
    width: calc(100% + 64px); /* 100% do tamanho + 32px da esquerda + 32px da direita */
    
    height: 1px; /* A espessura da linha */
    background-color: #2A2A2E; /* A cor sutil da divisória */
}


.timeline__card-text {
    font-size: 0.9rem;
    color: #A1A1AA;
    line-height: 1.6;
    text-align: left; /* Deixa o texto alinhado à esquerda como no print */
    margin-bottom: 30px; /* Empurra o ícone lá para baixo */
}

.timeline__card-text strong {
    color: #FFFFFF;
}

/* O Ícone Amarelo */
.timeline__card-icon {
    background-color: #FFBC1F;
    padding: 12px;
    border-radius: 15px;
    width: 65px;
    height: 65px;
    margin: 0 auto; /* Centraliza o ícone dentro do card */
    display: block;
}

/* =========================================
   O BOTÃO FINAL DA SEÇÃO
========================================= */

.timeline__cta-wrapper {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    width: 100%;
}

/* =========================================
   MODO CELULAR (RESPONSIVIDADE)
========================================= */

@media (max-width: 768px) {
    /* No celular, quebramos o layout alternado e jogamos a linha para a esquerda */
    .timeline__line-bg, .timeline__line-progress{
        left: 20px;
    }
    
    .timeline__marker {
        left: 20px;
        font-size: 2.2rem;
    }
    
    .timeline__step--right, 
    .timeline__step--left {
        justify-content: flex-end; /* Todos os cards vão para a direita */
    }
    
    .timeline__card {
        width: calc(100% - 60px); /* O card ocupa a tela toda, menos o espaço da linha */
        padding: 24px;
    }
}


/* =========================================
   SEÇÃO: SOBRE MIM (DIOGO)
========================================= */

.sobre-mim {
    width: 100%;
    max-width: 1000px;
    margin: 100px auto; /* Dá a distância de respiro da seção anterior */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* O Título da Seção */
.text-sobremim {
    margin-bottom: 60px;
    text-align: center;
}

.text-sobremim h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #FFFFFF;
}

/* O Container do Lado a Lado */
#conteiner-div {
    display: flex;
    align-items: center; /* Centraliza a imagem e o texto no eixo vertical */
    justify-content: center;
    gap: 60px; /* A distância entre a foto e o texto */
    width: 100%;
}

/* === LADO ESQUERDO: A Imagem === */
.img-diogo {
    flex: 1; /* Diz para ocupar 50% do espaço disponível */
    width: 100%;
    max-width: 450px;
    display: flex;
    justify-content: center;
}

.img-diogo img {
    width: 100%;
    max-width: 450px; /* Impede que a imagem fique gigante no monitor */
    height: auto;
    border-radius: 16px; /* Bordinha premium para combinar com os cards */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); /* Sombra elegante sob a imagem */
}

/* === LADO DIREITO: O Texto === */
.text-bio {
    flex: 1; /* Ocupa os outros 50% do espaço */
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px; /* Dá aquele respiro perfeito entre cada parágrafo */
    
    /* === O EFEITO DA CAIXA COM GRADIENTE === */
    /* Gradiente sutil: começa em um cinza escuro no topo e desvanece para a cor de fundo do site na base */
    background: linear-gradient(180deg, #1A1A1E 0%, #0B0B0D 100%); 
    
    /* Borda "Glass" (Vidro): Uma linha branca com apenas 8% de visibilidade para dar o reflexo */
    border: 1px solid rgba(255, 255, 255, 0.08); 
    
    border-radius: 20px; /* Arredondamento suave idêntico ao do print */
    padding: 40px; /* Crucial: Espaço interno para o texto respirar e não colar na borda */
    
    /* Sombra profunda para descolar o card do fundo da página */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.text-bio p {
    font-size: 1rem;
    color: #A1A1AA; /* O cinza das suas letras de leitura */
    line-height: 1.7; /* Altura de linha maior para conforto visual */
}

/* Destaque para as palavras-chave no texto */
.text-bio strong {
    color: #FFFFFF; /* Acende as palavras importantes no escuro */
    font-weight: 700;
}

/* =========================================
   MODO CELULAR (RESPONSIVIDADE)
========================================= */

@media (max-width: 768px) {
    #conteiner-div {
        flex-direction: column; /* Quebra o lado a lado e empilha um em cima do outro */
        gap: 40px;
    }
    
    .text-sobremim h3 {
        font-size: 1.8rem;
    }

    .text-bio {
        text-align: center; /* No celular, alinhar o texto ao centro costuma converter mais */
    }
}


/* =========================================
   SEÇÃO: FAQ (PERGUNTAS FREQUENTES)
========================================= */

.faq {
    width: 100%;
    /* Deixamos o FAQ um pouco mais estreito (800px) que o resto do site 
       porque linhas de texto muito longas cansam a leitura */
    max-width: 800px; 
    margin: 100px auto;
    padding: 0 20px 100px 20px; /* O padding extra embaixo dá espaço pro final da página */
}

.faq__header {
    text-align: center;
    margin-bottom: 50px;
}

.faq__title {
    font-size: 2.2rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 10px;
}

.faq__subtitle {
    font-size: 1.1rem;
    color: #A1A1AA;
}

/* Container de todas as perguntas */
.faq__accordion {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espaço entre cada bloco de pergunta */
}

/* Cada Bloco Individual (Pergunta + Resposta) */
.faq__item {
    background-color: #121214;
    border: 1px solid #2A2A2E;
    border-radius: 12px;
    overflow: hidden; /* Corta qualquer coisa que vaze da borda arredondada */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito Premium: Acende a borda e cria uma sombra ao passar o mouse */
.faq__item:hover {
    border-color: #F5AD0B; 
    box-shadow: 0 5px 15px rgba(245, 173, 11, 0.05);
}

/* O Botão Clicável (A Pergunta) */
.faq__question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: transparent;
    border: none;
    color: #FFFFFF;
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

/* O Ícone da Seta no canto direito */
.faq__icon {
    flex-shrink: 0;
    margin-left: 20px;
    color: #F5AD0B; /* A seta fica amarela para convidar ao clique */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Animação suave para quando girar */
}

/* =========================================
   A MÁGICA DA SANFONA (ESCONDENDO A RESPOSTA)
========================================= */

.faq__answer {
    /* Começa com altura zero para não aparecer na tela */
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease; /* Quando o JS mudar a altura, ele vai deslizar */
}

.faq__answer-inner {
    padding: 0 24px 24px 24px; /* Padding embaixo e dos lados, mas não em cima */
    color: #A1A1AA;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================
   ESTADO ATIVO (QUANDO O USUÁRIO CLICAR)
========================================= */

/* O JS vai adicionar a classe .active no .faq__item. 
   Quando isso acontecer, a seta gira 180 graus! */
.faq__item.active .faq__icon {
    transform: rotate(180deg);
}

.faq__item.active .faq__question {
    color: #F5AD0B; /* A pergunta fica amarela enquanto estiver aberta */
}


/* =========================================
   ANIMAÇÃO DE ROLAGEM GLOBAL (FADE IN UP)
========================================= */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px); /* Elemento começa 40 pixels mais para baixo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform; /* Truque premium: avisa o navegador para otimizar no celular */
}

/* Quando o JavaScript ver que o elemento entrou na tela, ele adiciona essa classe: */
.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0); /* Desliza de volta para a posição original */
}

/* =========================================
   RODAPÉ (FOOTER)
========================================= */
.footer {
    width: 100%;
    background-color: #050505; /* Preto absoluto para dar contraste com o fundo da página */
    border-top: 2px solid #F5AD0B; /* Linha de destaque para separar o site do rodapé */
    padding: 60px 20px 30px 20px;
    margin-top: 80px; /* Distância da seção de FAQ */
}

.footer__container {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Área de Suporte */
.footer__contact {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.footer__contact h4 {
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
}

.footer__contact p {
    color: #A1A1AA;
    font-size: 1rem;
    max-width: 500px;
}

/* Botão de Contato (Visual "Outline" para não brigar com o CTA principal) */
.footer__btn {
    margin-top: 10px;
    background-color: transparent;
    color: #F5AD0B;
    border: 1px solid #F5AD0B;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer__btn:hover {
    background-color: #F5AD0B;
    color: #000000;
}

/* Créditos */
.footer__bottom {
    width: 100%;
    border-top: 1px solid #2A2A2E;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer__bottom p {
    color: #71717A; /* Cinza mais escuro para não chamar tanta atenção */
    font-size: 0.85rem;
}

.footer__bottom strong {
    color: #FFFFFF; /* Seu nome iluminado em branco */
}

/* Responsividade do Rodapé */
@media (max-width: 768px) {
    .footer {
        padding: 50px 15px 20px 15px;
    }
    
    .footer__bottom {
        flex-direction: column;
        text-align: center;
    }
}