:root {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --glow-color: #fd6800;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

body.no-scroll {
    overflow: hidden !important;
}

/* ---------------------------------
   PRELOADER
--------------------------------- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0a0a0a;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.preloader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#preloader-percentage {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(3rem, 8vw, 5rem);
    color: #ffffff;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

.preloader-bar-container {
    width: 250px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

#preloader-bar {
    width: 0%;
    height: 100%;
    background-color: var(--glow-color);
}

.preloader-hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(1.05);
}

/* ---------------------------------
   HERO SECTION
--------------------------------- */
.hero {
    position: relative;
    z-index: 20; /* Elevado para 20 (maior que a seção Dor) para garantir que tudo dentro da hero fique imune à sobreposição das barras laranjas */
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5%;
    overflow: hidden;
}

/* ---------------------------------
   STARS BACKGROUND
--------------------------------- */
#stars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.star {
    position: absolute;
    background-color: #ffffff;
    border-radius: 50%;
    opacity: 0;
    animation: twinkle ease-in-out infinite alternate;
}

@keyframes twinkle {
    0% {
        opacity: 0.05;
        transform: scale(0.9);
    }

    100% {
        opacity: 0.4;
        transform: scale(1.1);
    }
}

/* ---------------------------------
   3D BALLS BACKGROUND
--------------------------------- */
#balls-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Atrás dos textos (10) e imagem (5) da Hero */
    pointer-events: none;
    overflow: hidden;
}

.ball-3d {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: contain;
    /* A animação agora é via JS Engine Física */
}

/* ---------------------------------
   LAYOUT & CONTENT
--------------------------------- */
.hero-content {
    position: relative;
    z-index: 20; /* Elevado para 20 para garantir que o gráfico de barras da seção abaixo cresça POR TRÁS dos textos e imagem, e não sobrepondo eles */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    padding: 0 5%;
}

/* ESQUERDA: TEXTO */
.hero-text {
    flex: 1;
    z-index: 10; /* Elevado para sempre sobrepor as bolas */
}

.headline {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(2.5rem, 6vw, 3.5rem);
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.headline .highlight {
    color: var(--glow-color);
}

.sub-headline {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 400;
    line-height: 1.6;
    margin-top: 1.5rem;
    color: rgba(255, 255, 255, 0.85);
    /* Branco levemente suavizado para leitura */
    max-width: 90%;
}

.hero-cta-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    display: inline-block;
    margin-top: 2.5rem;
    padding: 0.8rem 2rem;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #a0a0a0;
    text-transform: lowercase; /* Texto minúsculo como solicitado */
    text-decoration: none;
    background-color: transparent; /* Transparente para o pseudo-elemento preencher */
    border: 1.5px solid var(--glow-color);
    border-radius: 50px; /* Pill shape */
    transition: color 0.3s ease;
}

/* O fundo preenchedor */
.hero-cta-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: var(--glow-color);
    transition: width 0.3s ease;
    z-index: -1; /* Fica atrás do texto */
}

/* Expande a largura de 0 a 100% no hover */
.hero-cta-btn:hover::before {
    width: 100%;
}

.hero-cta-btn:hover {
    color: #000000;
}

/* DIREITA: IMAGEM & AURA */
.hero-image-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    z-index: 2;
    margin-right: -10%;
    /* Mais para a direita (quase encostando na borda) */
}

.hero-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1235px;
    /* Tamanho aumentado em mais 30% conforme pedido */
}

.hero-image-silhouette {
    position: relative;
    z-index: 5;
    width: 100%;
    display: flex;
}

/* Overlay CSS removido completamente para manter a foto 100% original */

.hero-image {
    display: block;
    width: 100%;
    object-fit: contain;
    opacity: 0.9; /* 10% de transparência para dar uma leve ambientação ao fundo */
    /* Sem outros filtros CSS. A imagem usa seu tratamento nativo. */
}

/* ---------------------------------
   AURA / ENERGY EFFECT
--------------------------------- */
.aura {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 60%);
    z-index: 4;
    mix-blend-mode: screen;
    top: 50%;
    left: 50%;
}

/* Camada 1: Núcleo denso da energia (mais perto do corpo) */
.aura-1 {
    width: 60%;
    /* Relativo ao tamanho da imagem */
    height: 80%;
    filter: blur(60px);
    animation: riseAura1 4s ease-in-out infinite alternate;
}

/* Camada 2: Energia expansiva e rápida */
.aura-2 {
    width: 80%;
    height: 90%;
    filter: blur(90px);
    animation: riseAura2 6s ease-in-out infinite alternate-reverse;
}

/* Camada 3: Aura um pouco mais larga */
.aura-3 {
    width: 90%;
    height: 70%;
    filter: blur(100px);
    animation: riseAura3 5s ease-in-out infinite alternate;
}

/* Camada 4: Fumaça alta dissipando */
.aura-4 {
    width: 70%;
    height: 100%;
    filter: blur(120px);
    animation: riseAura4 7s ease-in-out infinite alternate;
}

/* Keyframes de energia ascendente - baseados no centro (translate(-50%, -X)) */
@keyframes riseAura1 {
    0% {
        transform: translate(-50%, -40%) scale(0.9);
        opacity: 0.6;
    }

    100% {
        transform: translate(-50%, -60%) scale(1.1);
        opacity: 0.9;
    }
}

@keyframes riseAura2 {
    0% {
        transform: translate(-50%, -45%) scale(1.1);
        opacity: 0.4;
    }

    100% {
        transform: translate(-50%, -65%) scale(0.85);
        opacity: 0.7;
    }
}

@keyframes riseAura3 {
    0% {
        transform: translate(-50%, -40%) scale(0.95);
        opacity: 0.5;
    }

    100% {
        transform: translate(-50%, -60%) scale(1.2);
        opacity: 0.8;
    }
}

@keyframes riseAura4 {
    0% {
        transform: translate(-50%, -35%) scale(1);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -70%) scale(1.3);
        opacity: 0.6;
    }
}

/* ---------------------------------
   RESPONSIVO (MOBILE)
--------------------------------- */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        padding-top: 10vh;
    }

    .hero-text {
        margin-top: 2rem;
    }

    .hero-image-wrapper {
        justify-content: center;
        height: auto;
        flex: none;
        margin-right: 0;
    }

    .hero-image-container {
        max-width: 90%;
    }

    /* As auras usam % então reduzem junto. Só precisamos ajustar os blurs para mobile */
    .aura-1 {
        filter: blur(40px);
    }

    .aura-2 {
        filter: blur(60px);
    }

    .aura-3 {
        filter: blur(70px);
    }

    .aura-4 {
        filter: blur(80px);
    }
}

/* ---------------------------------
   PAIN SECTION (DORES E CONSCIENTIZAÇÃO)
--------------------------------- */
.pain-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: var(--glow-color); /* Fundo Laranja Sólido */
    z-index: 10; /* Garante que passe por cima das esferas brancas (z-index: 1) do Hero */
    padding: 10vh 5% 15vh 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Gráfico de Barras no Topo */
.pain-bars-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 400px; /* Quase dobramos a altura para o gráfico subir de forma dramática */
    transform: translateY(-100%); /* Joga o contêiner exatamente para cima da div laranja */
    display: flex;
    align-items: flex-end; /* Para as barras crescerem de baixo para cima */
    z-index: 10;
}

.pain-bar {
    flex: 1;
    background-color: var(--glow-color);
    height: 100%;
    transform-origin: bottom;
    transform: scaleY(0); /* Inicialmente invisíveis (escala 0 no eixo Y) */
}

/* Conteúdo da Seção Dor */
.pain-content {
    width: 100%;
    max-width: 1200px;
    z-index: 2;
}

.pain-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--bg-color); /* Preto para super contraste no Laranja */
    line-height: 1.3;
    text-transform: lowercase;
    text-align: left;
    margin-bottom: 4rem;
    max-width: 900px;
}

.pain-title .highlight-black {
    color: #000000;
    text-shadow: 2px 2px 0px rgba(255,255,255,0.3);
}

.pain-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.pain-card {
    background-color: #0a0a0a; /* Fundo escuro */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    height: 280px; /* Garante que todos os 6 cards tenham exatamente a mesma altura em desktop e mobile */
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    /* GSAP inicial */
    opacity: 0;
    transform: translateY(40px);
}

.pain-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8);
    border-color: rgba(255, 255, 255, 0.3);
}

.pain-card-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.1rem;
    color: var(--text-color);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.pain-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #b0b0b0;
    line-height: 1.6;
}

/* ---------------------------------
   CARD 6 CTA
--------------------------------- */
.pain-card-cta {
    align-items: center;
    text-align: center;
}

.pain-cta-desc {
    font-family: 'Inter', sans-serif;
    color: #a0a0a0;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.pain-btn {
    font-family: 'Michroma', sans-serif;
    font-size: 1rem;
    color: var(--glow-color); /* Laranja */
    background-color: transparent; /* Preto/Transparente */
    border: 2px solid var(--glow-color);
    border-radius: 50px; /* Pill shape */
    padding: 1rem 2rem;
    text-decoration: none;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(253, 104, 0, 0.3); /* Brilho neon discreto */
    transition: all 0.3s ease;
}

.pain-btn:hover {
    box-shadow: 0 0 20px rgba(253, 104, 0, 0.6);
    transform: scale(1.05);
    color: #ffffff;
}

/* Responsividade da Seção Dor */
@media (max-width: 992px) {
    .pain-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .pain-bars-container {
        height: 150px;
    }
    .pain-bar:nth-child(even) {
        display: none; /* Oculta metade das barras (5 de 10) no mobile */
    }
    .pain-grid {
        grid-template-columns: 1fr;
    }
    .pain-card:nth-child(5) { grid-column: auto; }
}

/* ---------------------------------
   FORGE SECTION (CICLO 1 - GSAP)
--------------------------------- */
.forge-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent; /* Permite ver as bolas fixed por trás */
    overflow: hidden;
}

.forge-container {
    position: relative;
    width: 100%;
    max-width: 1280px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* Container das 4 Bolas Laranjas (Fase 2) */
.forge-orange-balls {
    position: absolute;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    pointer-events: none;
}

.orange-ball {
    position: absolute;
    width: 150px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    opacity: 0;
}

/* Vídeos de Efeitos Especiais */
.forge-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15; /* Em frente à bola central (10) e lasers (12) */
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0; /* Inicia oculto, controlado via GSAP */
    filter: brightness(1.05) contrast(1.2); /* Reduz artefatos de compressão em todos os vídeos */
}

/* Regras Específicas para o Novo Vídeo (Bola + Fumaça Leve) */
#vid-fumaca-leve {
    width: 700px;
    height: 700px;
    object-fit: contain;
    left: 25%; /* Deslocado para a esquerda para dar espaço ao texto */
    mix-blend-mode: normal !important; 
    filter: none !important; 
    background-color: transparent !important;
}

/* Descrições da Lista de Serviços */
.services-text-container {
    position: absolute;
    right: 5%;
    width: 45%;
    height: 100%;
    top: 0;
    pointer-events: none; /* Para não bloquear cliques */
}

.service-item {
    position: absolute;
    width: 100%;
    opacity: 0;
    /* Alinha o centro vertical do texto com o top e adiciona o deslocamento para a animação */
    transform: translateY(calc(-50% + 30px));
}

/* Posição top de cada item será definida via GSAP para Faux-Scroll */

.forge-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(1.75rem, 3.2vw, 2.75rem); /* Reduzido em aprox 4px (0.25rem) */
    color: var(--text-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    /* text-shadow removido para manter o texto limpo */
}

.forge-desc {
    font-family: 'Inter', sans-serif;
    font-size: clamp(1rem, 1.3vw, 1.25rem);
    line-height: 1.6;
    color: #a0a0a0;
}

/* Mobile Adjustments for Forge */
@media (max-width: 992px) {
    .services-text-container {
        right: 2%;
        left: 42%;
        transform: none;
        width: 56%;
    }
    
    .service-item {
        text-align: left;
        transform: translateY(-50%); 
    }
    
    .forge-desc {
        font-size: 0.95rem; /* Levemente menor para caber melhor no mobile com os textos longos */
    }
}

/* ---------------------------------
   AUDIENCE SECTION (GSAP GRID)
--------------------------------- */
.audience-section {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: #1c1c1c; /* Fundo cinza escuro para contraste sutil */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: 10vh; /* Espaço para o título */
    margin-top: -25vh; /* Reduz o espaço vazio deixado pela seção anterior (forge) */
}

.audience-main-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: var(--text-color);
    text-transform: lowercase;
    text-align: center;
    margin-bottom: 5vh;
    z-index: 10;
    max-width: 90%;
}

.audience-cards-wrapper {
    position: relative;
    width: 90%;
    max-width: 1200px;
    height: 680px; /* Altura fixa no Desktop garante que a distância entre as linhas não crie sobreposição */
    perspective: 1000px; /* Para efeitos 3D se necessário */
}

.audience-card {
    position: absolute;
    /* Inicialmente centralizado via top/left/transform que o GSAP controlará */
    width: 100%;
    max-width: 450px;
    height: 320px; /* Altura rígida para garantir que todos os cards fiquem simétricos independente do tamanho do texto */
    background: rgba(25, 25, 25, 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0; /* Oculto até a animação */
    pointer-events: none; /* Ativado no GSAP */
}

.audience-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(1.1rem, 1.5vw, 1.4rem);
    color: var(--text-color);
    margin-bottom: 1rem;
    line-height: 1.4;
}

.audience-desc {
    font-family: 'Inter', sans-serif;
    font-size: clamp(0.95rem, 1.1vw, 1.1rem);
    color: #a0a0a0;
    line-height: 1.6;
}

/* Estilo Especial CTA */
.cta-card {
    border: 1px solid var(--glow-color);
    background: rgba(253, 104, 0, 0.05);
}

.cta-card .audience-title {
    color: var(--glow-color);
}

.cta-btn {
    display: inline-block;
    margin-top: 1.5rem;
    padding: 1rem 2rem;
    background-color: var(--glow-color);
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(253, 104, 0, 0.4);
    pointer-events: auto; /* Botão clicável */
}

.cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(253, 104, 0, 0.6);
}

@media (max-width: 768px) {
    .audience-cards-wrapper {
        height: 70vh; /* Retorna para 70vh no mobile, pois os cards se empilham */
    }

    .audience-card {
        padding: 2rem 1.5rem;
        max-width: 90%;
    }
} /* Fechamento crucial do @media query */

/* ---------------------------------
   QUEM SOU SECTION
--------------------------------- */
.about-section {
    position: relative;
    z-index: 10;
    background-color: var(--bg-color);
    /* Grid de textura muito sutil (5% branco) */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position: center center;
    padding: 6rem 5%;
    overflow: hidden;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.about-content {
    flex: 1;
    /* Animação inicial será controlada 100% pelo GSAP agora */
}

.about-title {
    font-family: 'Michroma', sans-serif;
    color: #ffffff; /* Cor principal solicitada na instrução */
    font-size: clamp(2rem, 4vw, 3rem);
    text-transform: lowercase;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.about-title .highlight {
    color: var(--glow-color);
}

.about-desc {
    font-family: 'Inter', sans-serif;
    color: #a0a0a0; /* Revertido para o cinza claro original */
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.about-image-wrapper {
    flex: 1;
    display: flex;
    justify-content: flex-end; /* Encosta a imagem na direita em desktop */
    align-items: center;
}

.about-image {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 20px;
    object-fit: cover;
    box-shadow: 0 0 50px rgba(253, 104, 0, 0.4); /* Glow aumentado (mais difuso e mais forte) */
    border: 1px solid rgba(253, 104, 0, 0.3);
}

/* Responsividade de About */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column-reverse; /* Imagem no topo em mobile */
        gap: 2rem;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .about-title {
        font-size: 1.8rem;
    }
    .about-desc {
        font-size: 1rem;
    }
}

/* ---------------------------------
   DIFERENCIAL SECTION
--------------------------------- */
.diferencial-section {
    position: relative;
    z-index: 10;
    background-color: #0a0a0a; /* Fundo liso, sem textura */
    padding: 6rem 5%;
    display: flex;
    justify-content: center;
}

.diferencial-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.diferencial-main-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #ffffff;
    text-transform: lowercase;
    text-align: center;
    margin-bottom: 4rem;
    max-width: 900px;
}

.diferencial-main-title .highlight {
    color: var(--glow-color);
}

.diferencial-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    width: 100%;
    margin-bottom: 4rem;
}

.diferencial-card {
    background-color: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 2.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
    /* GSAP inicial */
    opacity: 0;
    transform: translateY(40px);
}

.diferencial-card:hover {
    border-color: rgba(253, 104, 0, 0.3);
    box-shadow: 0 15px 35px rgba(253, 104, 0, 0.1);
    transform: translateY(-5px) !important;
}

.diferencial-number {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid var(--glow-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Michroma', sans-serif;
    font-size: 1.2rem;
    color: var(--glow-color);
    margin-bottom: 1.5rem;
    background-color: transparent;
}

.diferencial-card-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.1rem;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.diferencial-card-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #a0a0a0;
    line-height: 1.6;
}

.diferencial-cta-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
}

@media (max-width: 992px) {
    .diferencial-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .diferencial-grid {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------
   GLOBAL BUTTON STYLE
--------------------------------- */
.btn-primary {
    display: inline-flex;
    align-items: center;
    background-color: transparent; /* Fundo transparente */
    border-radius: 50px;
    padding: 0.3rem 1.5rem 0.3rem 0.3rem; 
    text-decoration: none;
    position: relative;
    overflow: hidden;
    margin-top: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    pointer-events: auto; /* Garante que o botão seja clicável/hoverable mesmo se o pai tiver pointer-events: none */
}

/* Fundo expansível do hover */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3.1rem; /* Tamanho exato para cobrir apenas o ícone inicial e seu padding */
    height: 100%;
    background-color: var(--glow-color); /* Laranja fd6800 */
    border-radius: 50px;
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
}

.btn-primary:hover::before {
    width: 100%; /* Expande o fundo laranja por todo o botão */
}

/* Ícone */
.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent; 
    color: #ffffff;
    border-radius: 50%;
    margin-right: 1rem;
    position: relative;
    z-index: 2; /* Acima do fundo expansível */
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.btn-primary:hover .btn-icon {
    transform: rotate(-45deg); /* Aponta seta para diagonal direita cima */
}

/* Texto */
.btn-text {
    position: relative;
    z-index: 2; /* Acima do fundo expansível */
    color: #ffffff;
    font-family: 'Michroma', sans-serif;
    font-size: 0.9rem;
    text-transform: lowercase;
    transition: color 0.3s ease;
}

.btn-primary:hover .btn-text {
    color: #ffffff; /* Texto branco no hover para contrastar com o laranja */
}

/* ---------------------------------
   SECTION LABELS
--------------------------------- */
.section-label {
    position: absolute;
    top: 2rem;
    left: 5%;
    font-family: 'Michroma', sans-serif;
    font-size: 0.75rem;
    color: rgba(160, 160, 160, 0.5); /* Cinza claro com baixa opacidade */
    text-transform: lowercase;
    letter-spacing: 2px;
    z-index: 50;
    pointer-events: none; /* Para não bloquear cliques na seção */
}

.section-label-dark {
    color: rgba(20, 20, 20, 0.7); /* Contraste adequado para fundos vibrantes */
}

/* ---------------------------------
   AUDIENCE ORB
--------------------------------- */
.audience-orb {
    position: absolute;
    width: 50vw;
    height: 50vw;
    max-width: 600px;
    max-height: 600px;
    border-radius: 50%;
    /* Fundo sólido liso, sem degradê para as bordas */
    background-color: var(--glow-color);
    filter: blur(60px); /* O blur cria o rastro e suavidade final */
    z-index: 1; /* Atrás dos cards */
    opacity: 0.40; /* Aumentado para 40% conforme pedido */
    top: 20%;
    left: 20%;
    animation: orbFloat 15s infinite alternate ease-in-out;
    pointer-events: none;
}

@keyframes orbFloat {
    0% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(30vw, 10vh) scale(1.1);
    }
    66% {
        transform: translate(-10vw, 30vh) scale(0.9);
    }
    100% {
        transform: translate(20vw, -10vh) scale(1.2);
    }
}

/* ---------------------------------
   CONTACT FORM SECTION
--------------------------------- */
.contact-section {
    position: relative;
    background-color: #050505;
    padding: 8rem 5%;
    display: flex;
    justify-content: center;
    overflow: hidden;
}

.contact-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: 4rem;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 10;
}

.contact-form-wrapper {
    flex: 1.5;
    background: rgba(20, 20, 20, 0.4);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 24px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    position: relative;
}

.contact-form-wrapper::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(253, 104, 0, 0.05) 0%, rgba(0, 0, 0, 0) 60%);
    z-index: -1;
    pointer-events: none;
}

.contact-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.contact-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #a0a0a0;
    margin-bottom: 2.5rem;
    line-height: 1.6;
}

.custom-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: flex;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.form-group.half {
    flex: 1;
}

.form-group label {
    font-family: 'Michroma', sans-serif;
    font-size: 0.75rem;
    color: #ffffff;
    margin-bottom: 0.5rem;
    text-transform: lowercase;
    letter-spacing: 1px;
}

.form-group input,
.form-group textarea {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    padding: 0.8rem 0;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-bottom-color: var(--glow-color);
    box-shadow: 0 4px 10px rgba(253, 104, 0, 0.1);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: rgba(160, 160, 160, 0.5);
}

.contact-direct {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.direct-card {
    background: rgba(253, 104, 0, 0.03);
    border: 1px solid rgba(253, 104, 0, 0.2);
    border-radius: 20px;
    padding: 3rem 2rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(253, 104, 0, 0.05);
}

.direct-title {
    font-family: 'Michroma', sans-serif;
    font-size: 1.2rem;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.direct-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #a0a0a0;
    margin-bottom: 2rem;
    line-height: 1.6;
}

/* Botão do WhatsApp específico */
.btn-whatsapp {
    display: inline-flex;
    align-items: center;
    background-color: transparent;
    color: #25D366;
    border: 1.5px solid #25D366;
    border-radius: 50px;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-family: 'Michroma', sans-serif;
    font-size: 0.85rem;
    text-transform: lowercase;
    transition: all 0.3s ease;
}

.btn-whatsapp:hover {
    background-color: #25D366;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.2);
}

.whatsapp-icon {
    margin-right: 0.8rem;
}

/* Responsividade Formulário */
@media (max-width: 992px) {
    .contact-container {
        flex-direction: column;
        gap: 3rem;
    }
    .contact-form-wrapper, .contact-direct {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 1.5rem;
    }
    .contact-form-wrapper {
        padding: 2rem 1.5rem;
    }
}

/* ---------------------------------
   FAQ SECTION
--------------------------------- */
.faq-section {
    position: relative;
    background-color: #0a0a0a;
    padding: 8rem 5%;
    display: flex;
    justify-content: center;
}

.faq-container {
    width: 100%;
    max-width: 900px; /* Mais estreito para focar na leitura */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 10;
}

.faq-main-title {
    font-family: 'Michroma', sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    color: #ffffff;
    text-align: center;
    margin-bottom: 4rem;
}

.faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    background: rgba(20, 20, 20, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    overflow: hidden;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.faq-item:hover {
    background: rgba(30, 30, 30, 0.8);
    border-color: rgba(253, 104, 0, 0.2);
}

.faq-question {
    width: 100%;
    background: transparent;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    color: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: var(--glow-color);
}

.faq-icon {
    font-size: 1.5rem;
    color: var(--glow-color);
    font-weight: 300;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease;
    opacity: 0;
    padding: 0 1.5rem;
}

.faq-answer p {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #a0a0a0;
    line-height: 1.7;
    margin-bottom: 1rem;
}

.faq-answer p:last-child {
    margin-bottom: 1.5rem; /* Espaço inferior quando aberto */
}

/* Estado Ativo (Aberto) */
.faq-item.active {
    border-color: rgba(253, 104, 0, 0.3);
    background: rgba(20, 20, 20, 0.8);
}

.faq-item.active .faq-question {
    color: var(--glow-color);
}

.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Vira um 'X' suavemente */
}

.faq-item.active .faq-answer {
    max-height: 600px; /* Suficiente para acomodar o texto */
    opacity: 1;
}

/* ---------------------------------
   FOOTER SECTION
--------------------------------- */
.footer-section {
    background-color: #050505;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6rem 5% 2rem;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 10;
}

.footer-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 4rem;
    flex-wrap: wrap;
    gap: 2rem;
}

.footer-info {
    max-width: 400px;
}

.footer-logo {
    font-family: 'Michroma', sans-serif;
    font-size: 1.8rem;
    color: #ffffff;
    margin-bottom: 1rem;
    text-transform: lowercase;
}

.footer-logo .highlight {
    color: var(--glow-color);
}

.footer-desc {
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    color: #a0a0a0;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.footer-links {
    display: flex;
    gap: 1.5rem;
}

.footer-link {
    font-family: 'Michroma', sans-serif;
    font-size: 0.8rem;
    color: #ffffff;
    text-decoration: none;
    text-transform: lowercase;
    transition: color 0.3s ease;
    position: relative;
}

.footer-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: var(--glow-color);
    transition: width 0.3s ease;
}

.footer-link:hover {
    color: var(--glow-color);
}

.footer-link:hover::after {
    width: 100%;
}

.back-to-top {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #a0a0a0;
    text-decoration: none;
    transition: color 0.3s ease;
}

.back-to-top:hover {
    color: #ffffff;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer-bottom p {
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    color: rgba(160, 160, 160, 0.6);
}

.highlight-text {
    color: var(--glow-color);
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        justify-content: center;
    }
}