/* --- Reset e Variáveis Globais --- */
:root {
    --dark-blue-bg: #070c14;
    --light-blue: #4090f7;
    --text-primary: #f2f9fe;
    --text-secondary: #c8d3e3;
    --text-tertiary: #828e9d;
    --card-bg: #101014;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-light: rgba(255, 255, 255, 0.05);
    --glow-color: rgba(64, 144, 247, 0.15);
}

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

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--dark-blue-bg);
    color: var(--text-primary);
    font-family: 'Sora', sans-serif;
    /* <-- Nova fonte aplicada */

    overflow-x: clip;
}

html {
    overflow-x: hidden;
}


[data-sr] {
    visibility: hidden;
}

/* --- Efeito de Brilho de Fundo --- */
.case-study,
.testimonials-section {
    position: relative;
}

.case-study::before,
.testimonials-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60%;
    height: 60%;
    background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    filter: blur(100px);
    z-index: -1;
    opacity: 0.7;
}

.case-study.reverse::before {
    left: 40%;
}

/* --- Componentes --- */
.container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 100px 0px;
}



.text-body {
    color: var(--text-tertiary);
    font-size: 16px;
    line-height: 1.7;
    max-width: 650px;
}

.text-body strong {
    color: var(--text-tertiary);
    font-weight: 700;
}

.section-subtitle {
    text-align: center;
    color: var(--text-tertiary);
    margin-bottom: 30px;
}

.section-tag {
    color: var(--light-blue);
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 14px;
}

/* ====================================================== */
/* --- Botão Flutuante (Solução Final e Estável) --- */
/* ====================================================== */

/* ====================================================== */
/* --- Botão Flutuante (Solução Final e Estável) --- */
/* ====================================================== */

/* O container que controla a posição e visibilidade */
.botao-flutuante {
    position: fixed;
    z-index: 1001;

    /* Posição: Canto inferior, mas centralizado na largura */
    bottom: 20px;
    left: 50%;

    /* Desce 100px e já centraliza no eixo X */
    transform: translate(-50%, 100px);

    transition: all 0.5s ease-in-out;
}

/* Quando ficar visível, só anima o Y de volta a 0 */
.botao-flutuante.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* O posicionamento fixo do botão foi removido permanentemente. */
.sticky-button-wrapper {
    position: relative;
    z-index: 1;
    /* Apenas para garantir a ordem de empilhamento */
}

/* ====================================================== */
/* --- Barra de Navegação (Navbar) --- */
/* ====================================================== */

/* ====================================================== */
/* --- Barra de Navegação (Navbar) - Versão Ajustada --- */
/* ====================================================== */

/* O posicionamento fixo do botão foi removido permanentemente. */
.sticky-button-wrapper {
    position: relative;
    z-index: 1;
    /* Apenas para garantir a ordem de empilhamento */
}

/* A barra principal, agora parte do fluxo da página */
.main-navbar {
    width: 100%;
    /* A propriedade 'position: fixed' foi REMOVIDA */

    /* Efeito de vidro (mantido) */
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borda inferior sutil (mantida) */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    /* Padding controla a altura e o alinhamento esquerdo/direito */
    padding: px 5px;
    /* ALTURA DIMINUÍDA e padding lateral aumentado */
}
.navbar-content {
    display: flex;
    /* justify-content: space-between; -- REMOVIDO */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 24px;
}

.navbar-brand {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    flex-grow: 1; /* FAZ A LOGO OCUPAR TODO O ESPAÇO, EMPURRANDO O BOTÃO */
}

.navbar-brand img {
    height: 25px; /* Altura ideal para a logo na navbar */
    width: auto;  /* A largura se ajusta automaticamente */
    display: block; /* Remove qualquer espaçamento extra abaixo da imagem */
}

/* ====================================================== */
/* --- Botão Navbar - Estilo Azul com Borda Sempre Ativa --- */
/* ====================================================== */

/* O container exterior que segura a animação de gradiente */
.navbar-button-animated {
    position: relative;
    padding: 1.5px;
    /* Define a espessura da borda animada */
    border-radius: 999px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
    z-index: 1;
}

/* O gradiente giratório que forma a borda */
.navbar-button-animated::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: calc(100% + 50px);
    height: calc(100% + 50px);

    /* GRADIENTE ALTERADO: Tons de azul e preto */
    background: conic-gradient(from 0deg at 50% 50%, #0ea5e9, #2563eb, #001f3f, #0ea5e9);

    animation: rotate-gradient 4s linear infinite;
}

/* ====================================================== */
/* --- Responsivo para o Botão da Navbar (Celular) --- */
/* ====================================================== */

@media (max-width: 768px) {

    /* REMOVE O BOTÃO DO MENU EM TELAS PEQUENAS */
    .navbar-button-animated {
        display: none !important;
    }

    /* CENTRALIZA A LOGO EM TELAS PEQUENAS */
    .navbar-content {
        justify-content: center !important;
    }

    .navbar-brand {
        flex-grow: 0 !important;
    }

    /* ADICIONA ESPAÇO ENTRE O PRIMEIRO TEXTO E O TOPO EM TELAS PEQUENAS */
    .hero-section {
        padding-top: 50px !important;
    }

    /* DEFINE O TAMANHO DA FONTE DO HERO-TAG PARA 14PX EM TELAS PEQUENAS */
    .hero-tag {
        font-size: 14px !important;
    }

    /* DEFINE O TAMANHO DA FONTE DO TÍTULO FINAL PARA 32PX EM TELAS PEQUENAS */
    .final-cta .secondary-heading {
        font-size: 32px !important;
    }

    /* DEFINE O TAMANHO DA FONTE DO TÍTULO DOS CASOS DE USO PARA 32PX EM MOBILE */
    .use-cases-header .secondary-heading {
        font-size: 32px !important;
    }

    /* AJUSTA A LARGURA DOS CARDS DA META E GOOGLE PARA SEREM MAIS FINOS EM SM */
    .meta-banner,
    .google-partners-banner {
        width: 85% !important;
        max-width: 355px !important;
    }


    

    /* REORGANIZA A SEQUÊNCIA PARA TELAS PEQUENAS */
    .what-is-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 40px !important;
    }

    /* 1. "Afinal, o que é IAgente?" vem primeiro */
    .what-is-content {
        order: 1 !important;
    }

    /* AUMENTA O TAMANHO DO TÍTULO EM MOBILE */
    .what-is-content .secondary-heading {
        font-size: 2.5rem !important;
        line-height: 1.1 !important;
    }

    /* 2. Texto "A IAgente é uma I.A conversacional..." vem segundo */
    .what-is-content .text-body {
        order: 2 !important;
        margin-bottom: 30px !important;
    }

    /* 3. Imagem passos vem terceiro */
    .passos {
        order: 3 !important;
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* 4. Card vem embaixo da imagem */
    .flywheel-card {
        order: 4 !important;
        margin-top: 0 !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Diminui o tamanho do ícone */
    .navbar-button-icon {
        width: 16px;
        height: 16px;
    }

    .h1-mobile{
        margin-top: 50px !important;
    }

    .hero-slide-icon{
        height: 235px !important;
        margin-bottom: -40px !important;
    }

    .navbar-button-content {
        padding: 6px 12px;      /* Reduz o espaçamento interno */
        font-size: 0.8125rem;   /* Diminui a fonte (equivalente a 13px) */
        gap: 6px;               /* Diminui o espaço entre o ícone e o texto */
    }

    /* Diminui o tamanho do ícone */
    .navbar-button-icon {
        width: 16px;
        height: 16px;
    }

    .navbar-brand img {
    height: 28px; /* Altura maior para a logo na navbar em telas SM */
    width: auto;  /* A largura se ajusta automaticamente */
    display: block; /* Remove qualquer espaçamento extra abaixo da imagem */
}
}

@media (max-width: 372px) {
    /* Diminui o tamanho do conteúdo do botão */
    .navbar-button-content {
        padding: 6px 12px;      /* Reduz o espaçamento interno */
        font-size: 0.8125rem;   /* Diminui a fonte (equivalente a 13px) */
        gap: 6px;               /* Diminui o espaço entre o ícone e o texto */
    }

    /* Diminui o tamanho do ícone */
    .navbar-button-icon {
        width: 16px;
        height: 16px;
    }

    .navbar-brand img {
    height: 14px; /* Altura ideal para a logo na navbar */
    width: auto;  /* A largura se ajusta automaticamente */
    display: block; /* Remove qualquer espaçamento extra abaixo da imagem */
}

    .h1-mobile{
        margin-top: 2px !important;
    }

}

@media (min-width: 800px) and (max-width: 986px) {
    /* Adicione aqui os estilos CSS que você quer aplicar apenas neste intervalo */
    
.embaixo-tablet {
    margin-top: 160px !important;
}

}
/* O conteúdo interno do botão, com o fundo azul */
.navbar-button-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;

    /* COR ALTERADA: Fundo em tom de azul forte */
    background-color: #000;

    /* COR ALTERADA: Texto branco para contraste */
    color: var(--text-primary);

    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Efeito de Hover */
.navbar-button-animated:hover .navbar-button-content {
    /* Fica um pouco mais claro no hover */
    background-color: #070c14;
    ;
    transform: scale(1.02);
    /* Leve efeito de zoom */
}

/* Estilo do ícone dentro do botão */
.navbar-button-icon {
    width: 16px;
    /* Tamanho um pouco maior para o novo ícone */
    height: 16px;

    /* A mágica para a cor do ícone acompanhar a cor do texto */
    fill: currentColor;

    /* Garante que o ícone não encolha */
    flex-shrink: 0;
}

/* Animação do gradiente (a mesma do outro botão) */
@keyframes rotate-gradient {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --- Botão Fixo Animado --- */
.sticky-button-wrapper {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.animated-gradient-button {
    position: relative;
    padding: 1.5px;
    border-radius: 999px;
    overflow: hidden;
    display: inline-block;
    text-decoration: none;
}

.animated-gradient-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250%;
    height: 250%;
    background: conic-gradient(from 0deg at 50% 50%, #4090f7, #ae38ff, #f22969, #4090f7);
    animation: rotate-gradient 4s linear infinite;
    transform: translate(-50%, -50%);
}

.animated-gradient-button .button-content {
    display: block;
    padding: 12px 28px;
    background-color: #07080d;
    color: var(--text-primary);
    border-radius: 999px;
    position: relative;
    z-index: 2;
    font-weight: 600;
    font-size: 16px;
    transition: background-color 0.3s;
}

.animated-gradient-button:hover .button-content {
    background-color: #1a1b20;
}

@keyframes rotate-gradient {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* ====================================================== */
/* --- Cabeçalho (Hero Section) Interativo --- */
/* ====================================================== */

.hero-section {
    text-align: center;
    padding: 10px 10px 100px;
    /* FUNDO: Base preta com o brilho azul #0d1b34 vindo de baixo */
    background: 
        radial-gradient(ellipse 80% 60% at 50% 100%, #0d1b34, transparent),
        #000000;
}

.hero-tag {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 500;
    color: #90a2af;
    background: #181e26;
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    margin-bottom: 40px;
    letter-spacing: 0.08em;
}

.hero-slides-container {
    position: relative;
    min-height: 220px;
    /* Altura para evitar "pulos" de layout */
    margin-bottom: 24px;
}

.hero-slide {
    position: absolute;
    width: 100%;
    height: auto;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;

    /* Animação de entrada e saída */
    opacity: 0;
    transform: translateY(20px) scale(0.98);
    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.hero-slide.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hero-slide-icon {
    height: 200px;
    width: auto;
    margin-bottom: 16px;
}

.primary-heading {
    margin: 0;
    line-height: 1.1;
    font-size: clamp(2.8rem, 5vw, 4rem);
    letter-spacing: -2.5px;
    font-weight: 300;
    /* Define a espessura da fonte como "Light" (fina) */
}

@media (min-width: 768px) {
    .primary-heading {
        /* Aumenta o tamanho máximo da fonte para desktop */
        font-size: clamp(4rem, 6vw, 5.5rem);
    }
}

@media (max-width: 768px) {
    
}


.secondary-heading {
    margin: 0;
    line-height: 1.1;
    font-size: clamp(2.3rem, 3.7vw, 3.3rem);
    letter-spacing: -2.5px;
    font-weight: 300;
}
/* ====================================================== */
/* --- Estilo do Texto com Gradiente Animado --- */
/* ====================================================== */

.hero-section .primary-heading strong {
    /* 1. O Gradiente */
    /* Criamos um fundo com um gradiente de cores azuis e roxos. */
    background: linear-gradient(90deg, #a855f7, #3b82f6, #0ea5e9, #3b82f6, #a855f7);
    
    /* 2. A Mágica do Recorte */
    /* Recortamos o fundo para que ele só apareça no formato do texto. */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 3. A Revelação */
    /* Deixamos a cor do texto transparente para que o fundo gradiente apareça. */
    color: transparent;
    
    /* 4. A Animação */
    /* Definimos um tamanho de fundo maior que o texto e aplicamos a animação. */
    background-size: 200% auto;
    animation: text-gradient-shine 5s linear infinite;

    /* Efeito de brilho sutil para destacar */
    text-shadow: 0 0 15px rgba(65, 105, 225, 0.3);
}

/* ====================================================== */
/* --- Animação do Gradiente do Texto --- */
/* ====================================================== */
/* (Adicione este bloco ao final do seu arquivo CSS) */

@keyframes text-gradient-shine {
    from {
        /* A animação começa com o gradiente totalmente à direita */
        background-position: 200% center;
    }
    to {
        /* E termina com o gradiente totalmente à esquerda, criando o efeito de deslize */
        background-position: 0% center;
    }
}

.embaixo {
    margin-top: 100px;
    display: flex;
    /* Adiciona flexbox para controlar o alinhamento dos itens */
    flex-direction: column;
    /* Garante que os itens fiquem em coluna */
    align-items: center;
    /* Alinha os itens à esquerda */
}

.embaixo h1 {
    margin: 0;
    line-height: 1.1;
    font-size: clamp(3rem, 7vw, 4.5rem);
    letter-spacing: -1px;
    font-weight: 300;
    margin-bottom: 20px;
    margin-top: 15px;
}

/* .embaixo h1 strong:first-child {
    Estiliza o primeiro  (o "com")



} */

.embaixo .titulo {
    background: linear-gradient(90deg, #a855f7, #3b82f6, #0ea5e9, #3b82f6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 200% auto;
    animation: text-gradient-shine 5s linear infinite;
    text-shadow: 0 0 15px rgba(65, 105, 225, 0.3);

}


.botao-hero{
    margin-top: -20px;
}

/* ====================================================== */
/* --- Media Query para Telas LG (1024px e acima) --- */
/* ====================================================== */
@media (min-width: 1024px) {
    .hero-section {
        padding-top: 40px; /* Diminui a distância do header para o hero-tag */
    }
    
    .hero-tag {
        margin-top: 20px; /* Diminui a distância adicional específica para o hero-tag */
        font-size: 15px; /* Diminui o tamanho da fonte para telas LG */
    }
    
    .passos img {
        max-width: 800px; /* Aumenta ainda mais o tamanho da imagem passos para telas LG */
    }
    
    .what-is-content .secondary-heading {
        margin-bottom: 50px; /* Adiciona espaço entre o título e o texto para telas LG */
    }
    
    /* AUMENTA UM POUCO O TAMANHO DA LOGO EM TELAS LG */
    .navbar-brand img {
        height: 28px; /* Aumenta de 25px para 28px em telas LG */
    }
    
    /* DIMINUI A DISTÂNCIA ENTRE O TEXTO E O CARD FLYWHEEL EM TELAS LG */
    .flywheel-card {
        margin-top: -300px !important;
    }
    
    /* EMPURRA A IMAGEM PASSOS PARA BAIXO EM TELAS LG */
    .passos {
        margin-top: 250px !important;
    }
    
    /* DIMINUI A DISTÂNCIA ENTRE O LOGO-CARROSSEL E O TÍTULO "AFINAL, O QUE É IAGENTE?" EM TELAS LG */
    .logo-carousel-section {
        margin-bottom: -240px !important;
    }
    
    /* AJUSTA O TAMANHO DA FONTE DO TÍTULO DOS CASOS DE USO EM TELAS LG */
    .use-cases-header .secondary-heading {
        font-size: clamp(2.5rem, 4vw, 3.5rem) !important;
    }
    
    /* DIMINUI A DISTÂNCIA ENTRE O CARD FLYWHEEL E O NATÁLIA BEAUTY EM TELAS LG */
    .what-is-section {
        margin-bottom: -50px !important;
    }
}

.hero-section .text-body {
    max-width: 650px;
    margin: 0 auto 25px auto;
    font-size: 20px;
    color: var(--text-secondary);
}

.hero-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    background-color: var(--light-blue);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.hero-cta-button:hover {
    background-color: #5fa1f8;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(64, 144, 247, 0.2);
}

.hero-cta-button svg {
    width: 20px;
    height: 20px;
}


/* ====================================================== */
/* --- Novo Botão Fixo que Aparece com a Rolagem --- */
/* ====================================================== */

/* Dentro da sua @media (max-width: 768px) */

.botao-fixo {
    display: block;
    position: fixed;
    z-index: 1001;
    bottom: 20px; /* Distância da base */

    /* ===== TÉCNICA FINAL E CORRETA ===== */
    /* Define uma margem fixa de 20px de cada lado */
    left: 20px;
    right: 20px;
    
    /* A largura (width) agora é calculada automaticamente pelo navegador */
    width: auto;

    /* REMOVEMOS as regras que causavam o conflito */
    /* transform: translateX(-50%); -- REMOVIDO */
    /* max-width: 500px; -- REMOVIDO */
}

/* Classe que o JavaScript adiciona para mostrar o botão */
.botao-fixo.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Desliza para a posição visível */
}

/* Classe que o JavaScript adiciona para mostrar o botão */
.botao-fixo.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    /* Desliza para a posição visível */
}

/* Ajustes para o animated-gradient-button se esticar dentro do novo container */
.botao-fixo .animated-gradient-button {
    display: block;
    /* Permite que ele ocupe a largura total do container */
    width: 100%;
}

@media (max-width: 768px) {


.embaixo h1 strong:first-child {
    /* Estiliza o primeiro  (o "com") */
    color: #7b8e9d;
    display: block;
    font-size: clamp(2.5rem, 6vw, 4rem);

}

.botao-fixo {
display: flex; /* Usamos flexbox para centralizar o conteúdo */
justify-content: center; 
position: fixed;
z-index: 1001;
bottom: 20px;
left: 20px;
right: 20px;
width: auto;
}

.botao-fixo > a {
    display: block; /* Garante que o link ocupe a largura do pai */
    width: 100%; /* O link ocupa a largura disponível */
}

}

.botao-fixo .button-content {
    text-align: center;
    /* Centraliza o texto dentro do botão esticado */
}
/* ====================================================== */
/* --- Carrossel de Players (Rolagem Automática Sempre Ativa) --- */
/* ====================================================== */
/* ====================================================== */
/* --- Carrossel de Players (Slide Automático Inteligente) --- */
/* ====================================================== */
/* Estilos gerais da seção (sem alterações) */
.logo-carousel-section {
    padding: 60px 0 100px 0;
}
.logo-carousel-section .section-subtitle {
    font-size: 25px;
    max-width: 550px;
    margin: 0 auto 50px auto;
}


/* O container que esconde o excesso e aplica o fade */
.logo-carousel-container {
    overflow: hidden;
    /* -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent); */
}

/* --- ATUALIZADO --- */
/* O carrossel agora usa uma animação CSS em vez de scroll */
.logo-carousel {
    display: flex;
    gap: 20px;
    padding: 10px 0;
    
    /* Aplica a animação de slide. A duração será definida pelo JS */
    
}

/* Ajuste a duração da animação para telas maiores */
@media (min-width: 768px) {
    .logo-carousel {
        /* Aumenta a duração para que a animação pareça mais lenta em telas maiores */
        
    }
}

/* Pausa a animação quando o mouse está sobre o carrossel */
.logo-carousel-container:hover .logo-carousel {
    animation-play-state: paused;
}

/* Keyframes que definem o movimento do slide */
@keyframes slide {
    from {
        transform: translateX(0);
    }
    to {
        /* Move o conjunto de logos em 50% para a esquerda.
           Como os itens são duplicados, isso cria um loop perfeito. */
        transform: translateX(-50%);
    }
}

/* Estilos dos cards (sem alterações) */
.player-card {
    position: relative;
    width: 274px;
    /* height: 296px; */
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease;

    
    /* NOVO: Adicione flexbox para organizar a imagem e a legenda */
    display: flex; 
    flex-direction: column;
}
.player-card:hover {
    transform: translateY(-5px);
}
.player-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    
    border-radius: 16px;
    transition: transform 0.4s ease;
}
.player-card:hover img {
    transform: scale(1.05);
}
.player-card figcaption {

    padding: 12px; /* Ajuste o padding para dar espaço ao texto */
     /* Adicione uma cor de fundo sólida ou gradiente */
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    /* NOVO: Garante que a legenda fique no final do container */
    margin-top: auto; 
}



/* --- Seção "Afinal, o que é?" --- */
.what-is-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.what-is-content .secondary-heading,
.case-content .secondary-heading {
    text-align: left;
}

.what-is-content .text-body {
    margin-top: 10px;
    max-width: 550px;
    margin-bottom: 30px;
}

@media (max-width: 992px) {
    /* Ajusta o layout para celular */
    .what-is-section {
        /* Muda o grid para uma única coluna */
        grid-template-columns: 1fr;
        /* Reduz o espaçamento entre os elementos */
        gap: 40px; 
    }

    .what-is-content .secondary-heading {
        /* Centraliza o título para telas menores */
        text-align: center; 
    }

    .what-is-content .text-body {
        /* Centraliza o texto do corpo para telas menores */
        margin: 0 auto 30px auto;
    }
    .passos img {
    max-width: 320px;
}
}

.flywheel-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: linear-gradient(180deg, rgba(35, 43, 56, 0.6) 0%, rgba(13, 17, 24, 0.4) 100%);
    border: 1px solid var(--border-color-light);
    border-radius: 12px;
    padding: 24px;
    text-decoration: none;
    color: #fff;
}

.flywheel-card-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-top: 5px;
}

.flywheel-card h4 {
    font-size: 16px;
    margin-bottom: 8px;
    font-weight: 600;
}

.flywheel-card p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}


/* ====================================================== */
/* --- Diagrama Circular: Solução Responsiva --- */
/* ====================================================== */
.diagram-container {
    --diagram-size: min(90vw, 400px);
    /* NOVO: Tamanho base dinâmico */
    --item-size: calc(var(--diagram-size) * 0.22);
    /* NOVO: Tamanho do item */
    --radius: calc(var(--diagram-size) * -0.42);
    /* NOVO: Raio dinâmico */

    position: relative;
    width: var(--diagram-size);
    /* ALTERADO */
    max-width: 450px;
    aspect-ratio: 1 / 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-origin: center center;
}

.diagram-glow {
    position: absolute;
    width: 70%;
    height: 70%;
    background: radial-gradient(circle, rgba(20, 25, 38, 0.5) 0%, transparent 70%);
    border-radius: 50%;
}

.diagram-path {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    animation: rotate-path 60s linear infinite;
}

@keyframes rotate-path {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.diagram-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--item-size);
    /* ALTERADO */
    height: var(--item-size);
    /* ALTERADO */
    margin-left: calc(var(--item-size) / -2);
    /* ALTERADO */
    margin-top: calc(var(--item-size) / -2);
    /* ALTERADO */
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    transform: rotate(var(--angle)) translateY(var(--radius)) rotate(calc(-1 * var(--angle)));
    /* ALTERADO */
}

.diagram-icon {
    width: 70%;
    /* ALTERADO para ser relativo ao item */
    height: 70%;
    /* ALTERADO */
    margin: 0 auto 8%;
    /* ALTERADO */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle, #2a2a2e, #1e1e21);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.diagram-icon svg {
    width: 45%;
    /* ALTERADO */
    height: 45%;
    /* ALTERADO */
    color: var(--text-secondary);
    transition: all 0.3s ease;
}

.diagram-text .step {
    display: block;
    font-size: clamp(0.65rem, 2.5vw, 0.75rem);
    /* NOVO: Fonte fluida */
    color: var(--text-tertiary);
    margin-bottom: 2px;
}

.diagram-text .title {
    display: block;
    font-size: clamp(0.8rem, 3.5vw, 1rem);
    /* NOVO: Fonte fluida */
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.diagram-item:hover {
    --hover-radius: calc(var(--radius) - 8px);
    /* NOVO: Efeito de hover dinâmico */
    transform: rotate(var(--angle)) translateY(var(--hover-radius)) rotate(calc(-1 * var(--angle))) scale(1.1);
    /* ALTERADO */
}

.diagram-item:hover .diagram-icon {
    border-color: rgba(64, 144, 247, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 0 20px rgba(64, 144, 247, 0.3);
}

.diagram-item:hover .diagram-icon svg {
    color: #fff;
}

.diagram-item:hover .diagram-text .title {
    color: var(--light-blue);
}


/* --- Seção Case Study --- */
.case-study {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    padding: 80px 0;
}

.case-study.reverse {
    grid-template-columns: 1fr 1fr;
}

.case-study.reverse .case-image {
    order: 2;
}

.case-study.reverse .case-content {
    order: 1;
}

.case-image {
    position: relative;
}

.case-image img {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    aspect-ratio: 1/1;
    object-fit: cover;
}

.case-content .secondary-heading {
    margin-bottom: 16px;
}

.case-stats {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-stats p {
    font-size: 16px;
    color: var(--text-secondary);
}

.case-stats p::before {
    content: '✓';
    color: var(--light-blue);
    margin-right: 12px;
    font-weight: bold;
}

/* Border Animation */
.case-image::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: linear-gradient(45deg, var(--gradient-color-start), var(--light-blue), var(--gradient-color-end), var(--light-blue));
    border-radius: 23px;
    z-index: -1;
    background-size: 300%;
    animation: border-glow 5s linear infinite;
    opacity: 1;
    /* Initially visible for this design */
}

/* ====================================================== */
/* --- Estilo para Ações do Case Study (Botão e Seguidores) --- */
/* ====================================================== */

.case-actions {
    display: flex;
    align-items: center;
    gap: 24px; /* Espaço entre o botão e o texto */
    margin-top: 30px;
    flex-wrap: wrap; /* Permite quebrar a linha em telas menores */
}

.followers-count {
    font-size: 0.875rem; /* 14px */
    font-weight: 500;
    color: var(--text-tertiary);
}

/* No celular, centralizamos as ações */
@media (max-width: 768px) {
    .case-content {
        /* Garante que o conteúdo dentro fique alinhado ao centro */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    .case-actions {
        justify-content: center; /* Centraliza o botão e os seguidores */
    }
}

@keyframes border-glow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .case-study {
        grid-template-columns: 1fr;
        /* Stack elements vertically */
        gap: 40px;
        /* Adjust vertical gap */

        /* Center content */
        padding: 60px 20px;
    }

    .case-study.reverse .case-image {
        order: -1;
        /* Image comes before content in reverse layout */
    }

    .case-study.reverse .case-content {
        order: 1;
        /* Content comes after image in reverse layout */
    }

    .case-stats {
        align-items: center;
        /* Center stats */
    }

    .case-stats p {
        text-align: left;
        /* Align text left within centered container */
    }

    /* Ensure border animation is visible on mobile as well */
    .case-image::before {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .case-study {
        padding: 40px 20px;
    }

    .case-content .secondary-heading {
        font-size: 2rem;
    }

    .case-stats p {
        font-size: 1rem;
    }
    
    .passos img {
        width: 500px; /* Força o tamanho específico */
        max-width: 90vw; /* Limita a 90% da largura da tela para não quebrar */
        display: block;
        margin: 0 auto; /* Centraliza a imagem */
        height: auto; /* Mantém a proporção */
        object-fit: contain; /* Garante que a imagem não seja cortada */
    }
    
    .passos {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    
    .what-is-content .secondary-heading {
        margin-bottom: 40px; /* Adiciona espaço entre o título e o texto para telas SM */
    }
}

:root {
    --gradient-color-start: #222;
    /* Adjust these colors to match your design */
    --gradient-color-end: #111;
}

/* ====================================================== */
/* --- Estilo ATUALIZADO da Tag "Quem Usa" --- */
/* ====================================================== */
/* ====================================================== */
/* --- Estilo da Tag "Quem Usa" (com correção de largura) --- */
/* ====================================================== */
.section-tag {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 10px;

    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-secondary);

    /* === CORREÇÃO DEFINITIVA PARA A LARGURA === */
    width: -moz-fit-content;
    /* Para compatibilidade com Firefox */
    width: fit-content;
    /* Força a largura a se ajustar ao conteúdo */
    /* ======================================== */

    background: linear-gradient(to right, rgba(0, 85, 255, 0.08), rgba(153, 153, 153, 0.1));
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);

    margin-bottom: 24px;
}

/* ====================================================== */
/* --- Posicionamento Responsivo da Tag "Quem Usa" --- */
/* ====================================================== */

/* Por padrão (DESKTOP): */
/* -------------------- */

/* A tag de celular fica escondida. */
.section-tag-mobile {
    display: none;
    max-width: 150px;
    margin-bottom: -25px;
}

.section-tag-mobile-h2 {
    display: none;
    margin-bottom: -25px;
    font-size: 30px;
}

/* A tag de desktop fica visível. */
.section-tag-desktop {
    display: block;
    /* Garante que ela apareça */
}


/* Em telas pequenas (CELULAR): */
/* ----------------------------- */
@media (max-width: 768px) {

    /* A tag de desktop some. */
    .section-tag-desktop {
        display: none;
    }

    /* A tag de celular aparece... */
    .section-tag-mobile {
        display: block;


    }

    /* A tag de celular aparece... */
    .section-tag-mobile-h2 {
        display: block;


    }
}

/* ====================================================== */
/* --- Seção de Depoimentos (Responsivo) --- */
/* ====================================================== */

.testimonials-section .secondary-heading {
    text-align: center;
    margin-bottom: 60px;
}

/* Wrapper para o carrossel em DESKTOP */
.scroller-wrapper {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.testimonials-scroller {
    display: flex;
    gap: 30px;
    width: max-content;
    animation: scroll-testimonials 60s linear infinite;
}

@keyframes scroll-testimonials {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.testimonials-scroller:hover {
    animation-play-state: paused;
}

.testimonial-card {
    width: 380px;
    flex-shrink: 0;
    padding: 30px;
    border-radius: 20px;
    background: #101419;
    border: 1px solid var(--border-color-light);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-text {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 24px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.testimonial-author img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.author-name {
    display: block;
    font-weight: 600;
}

.author-title {
    font-size: 14px;
    color: var(--text-tertiary);
}


/* ====================================================== */
/* --- Media Query para Celulares (telas menores que 768px) --- */
/* ====================================================== */
@media (max-width: 768px) {

    /* Remove o efeito de fade lateral */
    .scroller-wrapper {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: visible;
        /* Garante que as sombras não sejam cortadas */
    }

    .testimonials-scroller {
        /* Desliga a animação de rolagem horizontal */
        animation: none;

        /* Empilha os cards verticalmente */
        flex-direction: column;

        /* Ajustes de layout para a vertical */
        width: 100%;
        align-items: center;
        transform: none !important;
        /* Garante que a posição seja resetada */
    }

    .testimonial-card {
        /* Ajusta a largura para ocupar quase toda a tela */
        width: 95%;
        max-width: 400px;
    }
}

/* --- Seção Configuração --- */
.config-section {
    text-align: center;
}

.config-section .secondary-heading {
    text-align: center;
}

/*
 * O seu CSS atual está assim
 */


/*
 * O CSS da esquerda que você quer
 */
.config-section .section-subtitle {
    margin: 16px auto 60px auto;
    max-width: 500px;
    font-size: 25px;
    line-height: 1.6;

    /* A principal mudança é esta linha */
    text-align: left;
}

.config-section .section-subtitle strong{
    color: #717d8a !important;
}

.integrations-grid {
    display: flex;
    /* Usando flex para centralizar as fileiras */
    flex-direction: column;
    align-items: center;
    gap: 20px;
    /* Espaço entre as fileiras */
}

.integrations-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    /* Espaço entre os ícones */
    flex-wrap: wrap;
    /* Permite que os ícones quebrem a linha em telas menores */
}

.integration-item {
    width: 90px;
    /* Largura fixa para os cards */
    height: 90px;
    /* Altura fixa para os cards */
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, #2a2a2e, #1e1e21);
    /* Gradiente sutil no fundo */
    border-radius: 16px;
    /* Bordas mais arredondadas */
    border: 1px solid rgba(255, 255, 255, 0.05);
    /* Borda muito sutil */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
    /* Sombra para profundidade */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.integration-item:hover {
    transform: translateY(-5px);
    /* Efeito de elevação no hover */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.integration-item img {
    height: 36px;
    /* Tamanho dos ícones ajustado */
    width: 36px;
    object-fit: contain;
    /* Força todos os ícones a serem brancos, como na imagem */
    filter: brightness(0) invert(1);
}

/* ====================================================== */
/* --- Responsivo para a Seção de Integrações (Celular) --- */
/* ====================================================== */

@media (max-width: 768px) {
    /* Transforma o container principal em um grid */
    .integrations-grid {
        display: grid;
        /* Cria exatamente 4 colunas de largura igual */
        grid-template-columns: repeat(4, 1fr);
        gap: 15px; /* Um espaçamento um pouco menor para celular */
        width: 100%;
    }

    /* Este é o truque principal:
      Faz com que as divs de "fileira" sejam ignoradas pelo layout do grid,
      promovendo seus "filhos" (os ícones) para o grid principal.
    */
    .integrations-row {
        display: contents;
    }

    .sumir-desktop{
        display: none;
    }

    /* Ajusta os itens para se adaptarem ao novo grid */
    .integration-item {
        width: auto; /* Deixa o grid controlar a largura */
        height: auto;
        /* A forma mais moderna de garantir que os cards sejam quadrados */
        aspect-ratio: 1 / 1;
    }
}

/* --- Banner Meta --- */
/* --- Banner Meta com Gradiente CSS --- */
.meta-banner {
     display: flex;
    flex-direction: column; /* Alinha os itens verticalmente */
    justify-content: center; /* Centraliza os itens verticalmente */
    align-items: center; 
    padding: 60px 40px;
    /* Aumentei o padding vertical para mais espaço */
    margin: 80px auto;
    border-radius: 24px;
    /* Bordas um pouco mais arredondadas */
    text-align: center;
    position: relative;
    /* Necessário para conter os gradientes */
    overflow: hidden;
    /* Garante que o gradiente não vaze para fora das bordas */
    max-width: 1200px;
    /* Mesma largura máxima da seção use-cases */

    /* A MÁGICA ACONTECE AQUI:
      1. O primeiro radial-gradient cria a mancha de luz azul à esquerda.
      2. O segundo radial-gradient cria a mancha de luz roxa à direita.
      3. A cor sólida #f0f2f5 é a camada de fundo final.
    */
    background:
        radial-gradient(circle at 15% 40%, rgba(0, 122, 255, 0.12), transparent 40%),
        radial-gradient(circle at 85% 60%, rgba(200, 100, 255, 0.12), transparent 40%),
        #f0f2f5;
}


.meta-banner img {
    max-height: 140px;
    width: auto;
}

@media (max-width: 768px) {
   .meta-banner img {
     max-height: 60px;
     margin-bottom: 20px;
   }
}

.meta-banner p {
    /* Cor: Um cinza-escuro sofisticado, que é mais suave que o preto puro */
    color: #4a5568;

    /* Fonte e Espaçamento: Para máxima legibilidade */
    font-size: 16px;
    line-height: 1.65;

    /* Largura e Alinhamento: Para que o texto não fique muito largo */
    max-width: 750px;
    margin-left: auto;
    /* Centraliza o bloco de texto */
    margin-right: auto;
    /* Centraliza o bloco de texto */

    /* Margem: Adiciona um espaço entre o logo da Meta e o parágrafo */
    margin-top: 24px;
}

/* --- Seção Google Partners Premier --- */
.google-partners-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 60px 40px;
    margin: 80px auto;
    max-width: 1200px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 15% 40%, rgba(66, 133, 244, 0.12), transparent 40%),
        radial-gradient(circle at 85% 60%, rgba(52, 168, 83, 0.12), transparent 40%),
        #f8f9fa;
}

.google-partners-banner img {
    max-height: 140px;
    width: auto;
}

.google-partners-banner p {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.65;
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 24px;
}

@media (max-width: 768px) {
    .google-partners-banner img {
        max-height: 60px;
        margin-bottom: 20px;
    }
}


/* --- Seção CTA Final (Versão Corrigida) --- */
.final-cta {
    text-align: center;
    padding: 100px 20px 180px;
    /* Padding ajustado para dar espaço às curvas */
    position: relative;
    /* Necessário para posicionar as curvas */
    overflow: hidden;
    /* Esconde as partes das curvas que saem da seção */
    background: radial-gradient(ellipse 80% 50% at 50% 100%, rgba(93, 43, 184, 0.25), var(--dark-blue-bg) 75%);
    /* --- LINHAS ADICIONADAS PARA ANIMAÇÃO --- */
    background-size: 200% 200%;
    /* Deixa o fundo 2x maior que a seção */
    animation: moveGradient 10s ease-in-out infinite;
    /* Aplica a animação */
}

.final-cta .secondary-heading {
    max-width: 750px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
}

/* Essa regra garante o espaço entre o título e o seu botão original */
.final-cta .animated-gradient-button {
    margin-top: 40px;
}



/* Curva de fundo inferior */
.final-cta::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(50%);
    width: 140%;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 50%, rgba(64, 144, 247, 0.1) 0%, transparent 70%);
    opacity: 0.7;
}

/* --- Adicione este bloco ao final do seu CSS --- */
@keyframes moveGradient {
    0% {
        background-position: 50% 0%;
    }

    50% {
        background-position: 50% 100%;
    }

    100% {
        background-position: 50% 0%;
    }
}

/* --- Rodapé --- */
/* ====================================================== */
/* --- Rodapé (Footer) - Versão Final Centralizada --- */
/* ====================================================== */

footer {
    border-top: 1px solid var(--border-color);
    padding: 80px 20px;
    text-align: center;
}

.footer-container-v2 {
    max-width: 800px;
    /* Limita a largura do conteúdo central */
    margin: 0 auto;
}

.footer-title {

    font-size: 28px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 30px;
}

.footer-legal-text {
    font-size: 13px;
    line-height: 1.8;
    color: var(--text-tertiary);
    margin-bottom: 40px;
    margin-top: 30px;
}

.footer-links-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    /* Espaço entre as fileiras de "botões" */
}

.footer-links-row {
    display: flex;
    flex-wrap: wrap;
    /* Permite que os botões quebrem a linha em telas menores */
    justify-content: center;
    gap: 12px;
}

.footer-badge {
    display: inline-block;
    padding: 8px 16px;
    background-color: #101419;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.footer-badge:hover {
    background-color: #1c2129;
    color: var(--text-primary);
}
.link-logo{
    margin-bottom: 40px;
}

.logo-footer{
    max-width: 200px;
}

/* ====================================================== */
/* --- Ícones de Redes Sociais do Rodapé --- */
/* ====================================================== */

.footer-social-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px; /* Espaço entre os ícones */
    margin-top: 30px;
    margin: 30px
}

.footer-social-icons a {
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

.footer-social-icons a:hover {
    color: var(--light-blue);
    transform: translateY(-3px); /* Efeito de elevação no hover */
}

.footer-social-icons svg {
    width: 24px;
    height: 24px;
    fill: currentColor; /* Faz o ícone herdar a cor do link <a> */
}

/* --- Responsividade --- */
@media (max-width: 992px) {
    .what-is-section {
        grid-template-columns: 1fr;
        gap: 80px;
        text-align: center;
    }

    .what-is-content .secondary-heading {
        text-align: center;
    }

    .what-is-content .text-body {
        margin: 0 auto 30px auto;
    }

    .flywheel-card {
        text-align: left;
    }

    .case-study,
    .case-study.reverse {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .case-study.reverse .case-image,
    .case-study.reverse .case-content {
        order: initial;
    }

    .case-content {
        text-align: center;
    }

    .case-content .secondary-heading {
        text-align: center;
    }

    .case-stats {
        align-items: center;
    }

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

@media (max-width: 768px) {


    .hero-headline-container {
        padding: 0 10px;
    }

    .hero-headline-container .primary-heading {
        line-height: 1.2;
    }

    .text-body {
        font-size: 16px;
    }

    .container {
        padding: 60px 20px;
    }

    .case-stats {
        align-items: start;
    }

    .sticky-button-wrapper {
        top: auto;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
    }

    .integrations-grid {
        grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
        gap: 20px;
    }
}

/* ====================================================== */
/* --- Seção de Casos de Uso (Interativa) --- */
/* ====================================================== */

.container-fluid {
    width: 100%;
    padding: 100px 0;
}

.use-cases-section {
    background: radial-gradient(ellipse at 50% 100%, rgba(20, 25, 38, 0.5) 0%, transparent 70%);
}

.use-cases-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.use-cases-header {
    text-align: center;
    margin-bottom: 60px;

}





.use-cases-content {
    display: grid;
    grid-template-columns: 250px 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.use-cases-nav {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: flex-start;
}

.use-case-button {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.use-case-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: color 0.3s ease;
}

.use-case-button:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.use-case-button.active {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-weight: 600;
}

.use-case-button.active svg {
    color: var(--light-blue);
}

.use-case-panel {
    grid-column: 2 / 4;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    position: relative;
    min-height: 400px;
}

.use-case-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.use-case-image {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 350px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.use-case-image.active {
    opacity: 1;
    visibility: visible;
}

.use-case-text-wrapper {
    position: relative;
}

.use-case-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}

.use-case-text.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.use-case-text h3 {

    line-height: 1.1;
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    letter-spacing: -2.5px;
    font-weight: 300;
    line-height: 1.2;
    margin: 12px 0 16px 0;
}

.use-case-text p {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 450px;
}

/* LAYOUT PARA DESKTOP */
.use-cases-nav-mobile {
    display: none; /* Esconde o menu de celular no desktop */
}
.use-cases-content {
    display: grid;
    grid-template-columns: 250px 1fr 1fr;
    gap: 40px;
    align-items: center;
}
.use-cases-nav-desktop {
    display: flex; /* Garante que o menu de desktop esteja visível */
    flex-direction: column;
    gap: 12px;
    align-self: flex-start;
}

/* LAYOUT PARA CELULAR (telas menores que 992px) */
@media (max-width: 992px) {
/* Dentro da sua @media (max-width: 992px) */

.use-cases-nav-desktop {
    display: none; /* Esconde o menu de desktop no celular */
}
.use-case-text-wrapper{
    margin-top: 120px;
}

/* Container do menu mobile */
.use-cases-nav-mobile {
    display: flex;
    justify-content: center; /* Centraliza os botões */
    flex-wrap: wrap;         /* PERMITE a quebra de linha */
    gap: 12px;               /* Espaçamento entre os botões */
    margin-bottom: 180px;     /* Espaço abaixo do menu */
}

/* Estilo para os botões do menu mobile */
.use-cases-nav-mobile .use-case-button {
    transition: all 0.4s ease;
    transform: scale(1); /* Tamanho normal por padrão */
    opacity: 0.7;        /* Opacidade para botões inativos */
}

/* Estilo para o botão ATIVO, com um pouco mais de destaque */
.use-cases-nav-mobile .use-case-button.active {
    transform: scale(1.05); /* Destaque sutil */
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra para destacar */
}

/* Ajusta o layout do conteúdo principal para uma única coluna */
.use-cases-content {
    grid-template-columns: 1fr;
}

.use-case-panel {
    grid-column: 1 / -1;
    grid-template-columns: 1fr;
    text-align: center;
}

.use-case-text p {
    margin: 0 auto;
}
}