@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Space+Grotesk:wght@300..700&display=swap');

/* ==================== VARIÁVEIS E ESTILOS GERAIS ==================== */
:root {
    --primary-red: #D21116;
    --dark-bg: #0D0A17;
    --text-color: #FFFFFF;
    --font-title: 'Space Grotesk', sans-serif;
    --font-body: 'Open Sans', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: var(--dark-bg);
    color: var(--text-color);
    font-family: var(--font-body);
}

h1, h2, h3, h4 {
    font-family: var(--font-title);
    font-weight: normal;
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 1.5rem;
}



/* ==================== CABEÇALHO E NAVEGAÇÃO BASE ==================== */
/* ==================== CABEÇALHO E NAVEGAÇÃO BASE ==================== */
.header {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    background: linear-gradient(180deg, rgba(12,12,12,0.9) 0%, rgba(12,12,12,0) 100%);
    padding: 1rem 0;
}

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem; 
    max-width: 1200px;
    margin: 0 auto;
}

.nav__logo img {
    width: 150px; 
}

.nav__menu {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.nav__button {
    background-color: var(--primary-red);
    color: var(--text-color);
    border: none;
    padding: 0.8rem 1.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s;
    border-radius: 8px;
}

.nav__button:hover {
    background-color: rgba(255, 0, 0, 0.486);
}

.nav__toggle {
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color);
}


/* ==================== MENU DE NAVEGAÇÃO LATERAL (ATUALIZADO) ==================== */
.nav__list {
    position: fixed;
    top: 0;
    right: -100%; /* <<-- MUDANÇA: Começa escondido à direita */
    width: 80%;      /* <<-- MUDANÇA: Ocupa 80% da tela */
    max-width: 400px;/* <<-- MUDANÇA: Limite de largura para telas maiores */
    height: 100%;
    background-color: var(--dark-bg);
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza verticalmente */
    align-items: center;     /* Centraliza horizontalmente */
    padding: 2rem;
    z-index: 200;
    transition: right 0.4s ease-in-out; /* <<-- MUDANÇA: Anima a propriedade 'right' */
}

.nav__ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.nav__item {
    margin: 2rem 0;
}

.nav__link {
    font-family: var(--font-title);
    font-size: 2.0rem;
    color: var(--text-color);
    transition: color 0.3s;
    font-weight: 900;
}

.nav__link:hover {
    color: var(--primary-red);
}

.nav__close {
    position: absolute;
    top: 1.5rem;
    /* Posição do 'X' ajustada para dentro do menu lateral */
    right: 2rem;
    font-size: 2rem;
    cursor: pointer;
    color: var(--text-color);
}

/* Classe que mostra o menu, ativada via JavaScript */
.show-menu {
    right: 0; /* <<-- MUDANÇA: Move o menu para a posição visível na direita */
}


/* ==================== CONTÊINER GLOBAL (ESSENCIAL PARA ALINHAMENTO) ==================== */
.container {
    max-width: 1200px; /* Largura máxima do conteúdo */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem; /* Espaçamento lateral */
    padding-right: 1.5rem;
}


/* ==================== BLOCO 1: HERO (VERSÃO COMPLETA E FINAL) ==================== */

/* =================================================================== */
/* ============== ANIMAÇÃO DE FLUTUAÇÃO PARA HERO IMG ================ */
/* =================================================================== */

/**
 * Passo 1: Definir a animação.
 * - @keyframes é como criamos uma sequência de animação. Demos-lhe o nome de "floatAnimation".
 * - 0% e 100%: A animação começa e termina na posição original (translateY(0)).
 * - 50%: No meio da animação, a imagem terá subido 15 pixels (translateY(-15px)).
 * Isto cria um ciclo suave de subida e descida.
 */
@keyframes floatAnimation {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}

/**
 * Passo 2: Aplicar a animação à imagem.
 * - Selecionamos a imagem pela sua classe .hero__img.
 * - A propriedade 'animation' aplica os @keyframes que criámos.
 * - floatAnimation: o nome da nossa animação.
 * - 6s: a duração de um ciclo completo (6 segundos).
 * - ease-in-out: torna o movimento mais suave no início e no fim.
 * - infinite: faz com que a animação se repita para sempre.
 */
.hero__img {
  animation: floatAnimation 6s ease-in-out infinite;
}

/* --- Contêiner Principal da Seção --- */

.hero__section {
    height: 100vh; /* Ocupa a altura total da tela */
    position: relative; /* Base para o posicionamento do vídeo e outros elementos */
    overflow: hidden; /* Esconde qualquer parte do efeito de borda que vaze */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* --- Vídeo de Fundo --- */
.hero__background-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -1; /* Joga o vídeo para o fundo de tudo */
    object-fit: cover; /* Garante que o vídeo cubra a área sem distorcer */
}

/* --- Overlay Escuro (Opcional, mas recomendado para legibilidade) --- */
.hero__section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    z-index: 0; /* Fica entre o vídeo e o conteúdo */
}

/* --- Conteúdo Principal (Texto e Imagem) --- */
/* Garantindo que o conteúdo fique acima do overlay */
.hero__container, .hero__scroll, .hero__bottom-effect {
    position: relative;
    z-index: 1;
}

.hero__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-grow: 1; /* Faz o container ocupar o espaço vertical disponível */
    width: 100%;
    padding-bottom: 5rem; /* Espaço para a seta de scroll não ficar colada no texto */
}

.hero__data {
    flex-basis: 45%; /* Coluna do texto ocupa 45% do espaço */
    flex-shrink: 0;
    text-align: left;
}

#typing-h1 span{
    color: #D21116;
}

.hero__breadcrumb {
    display: block;
    width: 50px;
    height: 3px;
    background-color: var(--primary-red); /* Use sua variável de cor vermelha */
    margin-bottom: 1.5rem;
}

.hero__data h1 {
    font-size: 3rem;
    line-height: 1.1;
    color: var(--primary-red);
    margin-bottom: 1rem;
}

.hero__data h1 span {
   color: white;
}

.hero__data p {
    font-size: 1.1rem;
    max-width: 500px;
}

.hero__img {
    flex-basis: 30%; /* Coluna da imagem ocupa 55% */
    max-width: 650px;
}

/* --- Efeito de Borda Inferior "3D" --- */
.hero__bottom-effect {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    /* IMPORTANTE: Esta cor DEVE ser a mesma da próxima seção */
    background-color: #FFFFFF; /* Fundo branco da seção de marcas */
    clip-path: ellipse(150% 100% at 50% 100%);
    transform: translateY(50%);
    z-index: 5; /* Fica abaixo da seta de scroll */
}

/* --- Seta de Scroll --- */
.hero__scroll {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 1.5rem;
    color: white;
    border: 2px solid #555;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Fica acima de tudo na parte inferior */
    background-color: rgba(0, 0, 0, 0.3);
}

/* Estilo da barra com degradê de transparente para preto sólido */
.barra-transparente {
    /* O degradê agora vai de totalmente transparente para preto sólido */
    background-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0),   /* << MUDANÇA: Totalmente transparente em cima */
        rgba(0, 0, 0, 1) 70%    /* << MUDANÇA: Totalmente opaco (preto) em baixo */
    );
    position: absolute;
    top: 10;
    bottom: 0;
    width: 100%;
    min-height: 300px;
    padding: 20px 0;
    color: white;
    text-align: center;
}

/* Passo 2: CSS corrigido para a seta */
.seta-banner {
    position: absolute;
    z-index: 100;
    
    /* Posiciona a 30px da parte inferior da .hero__section */
    bottom: 6px; 
    
    /* Técnica para centralização horizontal perfeita */
    left: 50%;
    transform: translateX(-50%);

    /* A propriedade 'top' foi removida, pois estava causando o problema */
}

/*
 * DOCUMENTAÇÃO DO CÓDIGO
 * Este código cria um efeito de "aurora" ou "blob de cor" no fundo
 * de qualquer elemento que tenha a classe .bkg-tinta.
*/

.bkg-tinta {
    /* Passo 1: Preparar o container principal. */
    position: relative; /* Essencial para posicionar o objeto azul dentro dele. */
    overflow: hidden;   /* Garante que o objeto desfocado não "vaze" para fora da section. */
    
    /* * O fundo branco com transparência.
     * rgba(255, 255, 255, 0.7) significa:
     * Red: 255, Green: 255, Blue: 255 (que resulta em branco)
     * Alpha (transparência): 0.7 (70% opaco, 30% transparente).
     * Ajuste o valor de 'alpha' para mais ou menos transparência.
    */
    background-color: rgb(255, 255, 255);

    /* Opcional: Efeito de vidro fosco (glassmorphism) */
    /* Descomente a linha abaixo para fazer o fundo desfocar o que estiver atrás dele */
    /* backdrop-filter: blur(10px); */
}

.bkg-tinta::before {
    /* Passo 2: Criar o "objeto azul" virtual. */
    content: '';        /* Obrigatório para que o pseudo-elemento seja renderizado. */
    position: absolute; /* Posiciona o objeto em relação ao .bkg-tinta. */
    z-index: -1;        /* Coloca o objeto ATRÁS do conteúdo da section. */

    /* Passo 3: Definir a posição, tamanho e cor do objeto. */
    /* Você pode brincar com esses valores para mudar a posição da "luz". */
    top: -50px;
    left: -100px;
    
    /* Tamanho do objeto. Deixe-o grande para um efeito suave. */
    width: 400px;
    height: 400px;

    /* A cor do objeto. Use o azul que preferir. */
    background-color: #007bff; /* Um azul padrão. */
    
    /* Passo 4: A mágica do desfoque e formato. */
    border-radius: 50%; /* Transforma o quadrado em um círculo perfeito. */
    filter: blur(150px); /* O efeito de desfoque. Quanto maior o valor, mais suave. */
    opacity: 0.6; /* Controla a intensidade da cor. */
}

/* ==================== BLOCO 2: MARCAS COM MÁSCARA DE FADE (SOLUÇÃO FINAL) ==================== */

/* Barra com o fundo correto (como na sua imagem de referência) */
.brands__title-bar {
    /* NOVO GRADIENTE: Simétrico (escuro -> claro -> escuro) */
    background: linear-gradient(90deg, 
        #1A2038 0%, 
        #4D577A 25%, 
        #6E799D 50%, 
        #4D577A 75%, 
        #1A2038 100%
    );
    border-radius: 15px;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
}

/* Título (sem alterações) */
.brands__title-bar h2 {
    color: white;
    font-size: 2.5rem;
    line-height: 1.1;
    text-align: right;
    flex-shrink: 0;
    padding-right: 2rem;
}

/* A MÁGICA ACONTECE AQUI */
/* Procure a classe .brands__marquee e atualize assim: */
.brands__marquee {
    flex-grow: 1;
    width: 100%; /* <--- ADICIONE ISSO: Garante que ele ocupe a largura */
    overflow: hidden;
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
    z-index: 1; /* <--- ADICIONE ISSO: Garante que fique acima do fundo */

    /* A máscara de fade */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}



/* O restante do código não precisa de alterações */

.brands__section {
  
    color: #000;
    padding: 2rem 0;
    overflow: hidden;
    position: relative;
}

.marquee__content {
    display: flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}
.brands__logos {
    display: flex;
    flex-shrink: 0;
}
/* Estilo para cada "slot" de logo */
/* Estilo para cada "slot" de logo */
.logo__item {
    flex: 0 0 170px; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* <-- ADICIONE PADDING NAS LATERAIS */
    /* Exemplo: 25px de espaço de cada lado, totalizando 50px de separação */
    padding: 0 25px; 
}

/* Estilo das imagens dos logos */
.logo__item img {
    /* <-- TAMANHO AUMENTADO (de 100px para 120px) */
    max-height: 60px;
    width: auto;
    max-width: 100%;
    filter: brightness(0) invert(1);
    opacity: 0.8;
}
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}


/* ==================== BLOCO 2: SOLUÇÕES (COM ABAS) ==================== */
.solutions__section {
   
    color: #000;
    padding: 6rem 0;
}

.bkg-tinta{
    background-image: url(../assets/bkg-tinta.jpg);
    background-position: right;
    background-size: cover;
}

.logo-barra{
    max-width: 40px;
}

.solutions__container {
    display: flex;
    gap: 4rem;
    align-items: flex-start;
}

/* --- Coluna da Esquerda (Texto) --- */
.solutions__text-content {
    flex: 0 0 30%; /* Ocupa 30% da largura */
 /* 1. Define uma altura máxima para este contentor */
  max-height: 500px; /* Pode ajustar este valor (ex: 450px, 550px) */

  /* 2. Adiciona a barra de rolagem vertical APENAS se o conteúdo ultrapassar a altura máxima */


  /* 3. (Opcional) Adiciona um pequeno "padding" à direita para a barra de rolagem não ficar colada ao texto */
  padding-right: 15px;
}

.section-title {
    font-size: 2.5rem;
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}
/* Linha vermelha abaixo do título */
.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background-color: var(--primary-red);
}

.solutions__text-content p {
    font-size: 1.1rem;
    line-height: 1.6;
    text-align: left;
}

/* --- Coluna da Direita (Interativa) --- */
/* Contêiner dos itens interativos */
.solutions__interactive-content-mobile {
    /* Ocupa 55% do espaço. O '1' significa que pode crescer/encolher */
    flex: 1 1 55%;

    /* COMANDO MÁGICO: Impede que o contêiner encolha menos que 400 pixels.
       Este valor é a sua "largura de segurança". Ajuste se necessário. */
    min-width: 100%; 
    
    /* Mantém as regras que já tínhamos para organizar os botões internamente */
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.solutions__tabs-container {
    display: flex;
    height: 500px; /* Altura fixa para as abas */
    gap: 1rem;
}

.solution-tab {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s ease, background-color 0.5s ease;
    
    /* Estado Inativo (fechado) */
    background-color: var(--primary-red);
    flex: 0 0 80px; /* Largura fixa quando fechado */
}

.solution-tab.active {
    /* Estado Ativo (aberto) */
    background-color: #0D0A17; /* Cor preta */
    flex: 1 1 400px; /* Cresce para ocupar o espaço */
}

/* PASSO 1: Ajuste a transição na classe base do título */
.tab-title {
    font-family: var(--font-title);
    font-size: 2rem;
    font-weight: 900;
    color: white;
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    
    /* Estilo para texto vertical (estado inicial) */
    transform-origin: center;
    writing-mode: vertical-rl;
    transform: translate(-50%, -50%) rotate(180deg);
    
    /* * MUDANÇA PRINCIPAL:
     * Adicionamos 'top' à transição para que a mudança de posição vertical 
     * seja animada suavemente, em vez de ser instantânea.
    */
    transition: transform 0.5s ease, top 0.5s ease;
}

/* PASSO 2: Simplifique a animação no estado ativo */
.solution-tab.active .tab-title {
    /* O título agora desliza para a nova posição 'top' de forma animada */
    top: 2.5rem; 
    display: none;
    /* A rotação é desfeita e o texto fica na horizontal */
   

    /* * MUDANÇA PRINCIPAL:
     * Removemos o 'translateY(-200px)' que causava o salto.
     * Agora, o transform cuida apenas do alinhamento horizontal e da rotação.
    */
    transform: translateX(-50%) rotate(0deg);
}


.text-soluctions{
    font-size: 2.5rem;
    color: white;
}

.text-s{
    color: #cccccc;
}

.images-soluctions{
    max-width: 100px;
    display: flex;
    gap: 50px;
    margin-top: 30px;
}

/* ===================================================== */
/* === ESTILIZAÇÃO CUSTOMIZADA DAS BARRAS DE ROLAGEM === */
/* ===================================================== */

/* --- 1. Estilo para .p-solutions (Fundo Escuro) --- */

/* Para Firefox: Define a barra como "fina" e define
   a cor do polegar (vermelho) e do trilho (cinza escuro) */
.p-solutions {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-red) #1a1a1a;
}

/* Para Chrome, Safari, Edge */
.p-solutions::-webkit-scrollbar {
    width: 8px; /* Largura da barra */
}

.p-solutions::-webkit-scrollbar-track {
    background: #1a1a1a; /* Cor do trilho (um cinza bem escuro) */
    border-radius: 20px;
}

.p-solutions::-webkit-scrollbar-thumb {
    background-color: var(--primary-red); /* Cor principal do site */
    border-radius: 20px;
}

.p-solutions::-webkit-scrollbar-thumb:hover {
    background-color: #a00; /* Vermelho um pouco mais escuro ao passar o mouse */
}


/* --- 2. Estilo para .solutions__text-content (Fundo Claro) --- */

/* Para Firefox: Define a barra como "fina" e define
   a cor do polegar (vermelho) e do trilho (cinza claro) */
.solutions__text-content {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-red) #eeeeee;
}

/* Para Chrome, Safari, Edge */
.solutions__text-content::-webkit-scrollbar {
    width: 8px;
}

.solutions__text-content::-webkit-scrollbar-track {
    background: #eeeeee; /* Cor do trilho (um cinza claro) */
    border-radius: 20px;
}

.solutions__text-content::-webkit-scrollbar-thumb {
    background-color: var(--primary-red); /* Cor principal do site */
    border-radius: 20px;
}

.solutions__text-content::-webkit-scrollbar-thumb:hover {
    background-color: #a00; /* Vermelho um pouco mais escuro */
}

.p-solutions{
    color: white;
    padding-left: 20px;
    padding-right: 20px;
    
    max-height: 150px; /* <- Pode ajustar este valor (ex: 120px, 200px) */
}

.new-bar {
    position: relative;
    top: -10px;
    max-height: 745px;
}


.solution-tab__content {
    width: 100%;
    height: 100%;
    display: block;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.4s 0.2s ease, transform 0.4s 0.2s ease;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    max-height: 300px;

    
}

.solution-tab.active .solution-tab__content {
    opacity: 1;
    transform: scale(1);
}

.solution-tab__content img {
    max-height: 90%;
    width: auto;
    
}

/* --- Linha do Tempo --- */
.solutions__timeline {
    margin-top: 2rem;
}

.timeline__bar {
    width: 100%;
    height: 4px;
    
    border-radius: 2px;
    position: relative;
    margin-bottom: 20px;
}

.timeline__marker {
    position: absolute;
    top: 50%;
    left: 15%; /* Posição inicial */
    transform: translateY(-50%);
    color: #00AEEF; /* Cor azul do asterisco */
    font-size: 2rem;
    font-weight: bold;
    transition: left 0.5s ease;
}

.timeline__labels {
    display: flex;
    justify-content: space-between;
    padding: 0 5%; /* Alinha os textos com as pontas da barra */
    margin-top: 0.5rem;
}

.timeline__labels span {
    font-size: 0.9rem;
    color: #888;
    font-weight: bold;
}

.nav__lang-switcher-container{
    justify-content: center;
}


/* ==================== BLOCO 3: TORCH (COM POSICIONAMENTO ABSOLUTO) ==================== */

.simbolo-cata{
    max-width: 3rem;
}

.img-solution-icon{
    min-width: 100%;
    height: auto;
    filter: brightness(0) invert(1);
}

.torch-item{
    display: none;
}

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

.torch__section {
    padding: 1rem 0; /* Aumentamos o padding para dar espaço para a imagem flutuar */
    background: linear-gradient(342deg, #000000 0%, #460000 100%, #000000 100%);
    position: relative;
    /* Removemos o z-index daqui para simplificar */
}

.torch__container {
    position: relative; /* O container agora é a referência para posicionar a caixa de texto */
    display: flex;
    justify-content: flex-end; /* Alinha a caixa de texto à direita */
}

[data-aos^=zoom][data-aos^=zoom].aos-animate{
    transform: translateZ(0) scale(1)
}

/* ESTILO DA IMAGEM FLUTUANTE */
/* ESTILO DA IMAGEM FLUTUANTE */
.torch__img {
    display: block;
   
    min-width: 650px;
    height: auto;
    
    /* A MÁGICA DO "VAZAR" */
    position: absolute;
    left: 0;
    top: -10%; /* << MUDANÇA: Usaremos 50% para um melhor alinhamento vertical */
    transform: translateY(-50%);
    z-index: 2;

    /* LINHA ADICIONADA: Anima a mudança de altura suavemente */
     transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
    /* GARANTA QUE O 'transform-origin' SEJA 'center' OU REMOVA A LINHA */
    transform-origin: center;
}

/* Caixa de Conteúdo da Direita */
.torch__data {
    width: 45%;
    background-color: #0d0d0d;
    border: 1px solid var(--primary-red);
    border-radius: 20px;
    padding: 2.5rem;
    position: relative;
    z-index: 1;

    /* --- MUDANÇA --- */
    /* A altura mínima será nosso ponto de partida */
    min-height: 510px; 
    /* Adicionamos uma transição aqui também para um efeito bônus */
    transition: min-height 0.4s ease-in-out;
}

/* O resto do CSS para título, texto, e features continua o mesmo */
#torch-title {
    font-family: "Space Grotesk", sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
}

/* ======================================================== */
/* ESTILO CORRETO PARA O TÍTULO DINÂMICO (H4)         */
/* ======================================================== */

/* Esta é a regra que vai estilizar o título que o JavaScript cria.
   Ela aplica os estilos ao h4 dentro da caixa de dados da seção Torch. */
.torch__data h4 {
    /* Estilos que você queria, inspirados no .section-subtitle */
    color: var(--primary-red);
    font-family: var(--font-title);
    font-weight: bold;
    font-size: 1rem; /* Um bom tamanho para um título principal */
    text-transform: uppercase;

    /* Bônus para alinhar o título com a imagem (como em "APPLE OPTIAI *") */
    display: flex;
    align-items: center;
    gap: 1rem; /* Espaçamento entre o texto e a imagem */
}

/* Opcional: Garante que a imagem dentro do h4 não fique gigante */
.torch__data h4 img {
    max-height: 2.2rem; /* Altura máxima igual ao tamanho da fonte */
    width: auto;
}

#torch-title span { color: var(--primary-red); }
.torch__separator {
    width: 40px; height: 2px; background-color: var(--primary-red); margin: 1rem 0 1.5rem 0;
}
#torch-text {
    font-size: 1rem; line-height: 1.6; color: #cccccc;
}
.torch__features {
    display: flex; gap: 1.5rem; margin-top: 2rem;
}
.feature__item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; cursor: pointer;
}
.feature__thumbnail {
    position: relative; width: 100%; border-radius: 10px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.feature__thumbnail img {
    width: 100%; display: block;
}
.feature__icon {
    position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background-color: var(--primary-red); color: white; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 1rem; font-weight: bold;
}
.feature__item span {
    font-size: 0.9rem; font-weight: bold; color: #888; transition: color 0.3s ease;
}

.feature__item.active span {
    color: #ffffff;
}
#torch-main-image, #torch-title, #torch-text {
    transition: opacity 0.3s ease-in-out;
   
}
.content-changing {
    opacity: 0;
}

/* ==================== BLOCO 4: CASES (CSS COMPLETO E FINAL) ==================== */
.cases__section {
    background-color: #f7f7f7;
    color: #000;
    padding: 5rem 0;
    /* OBRIGATÓRIO: Impede scroll horizontal na janela do navegador */
    overflow: hidden; 
}

.cases__container {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.cases__title {
    text-align: center;
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--primary-red);
    font-family: var(--font-title);
    font-weight: bold;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.cases__title h2 {
    font-family: var(--font-title);
    font-weight: 900;
    font-size: 2.5rem;
    color: #000;
}

/* --- Viewport do Slider --- */
.slider__viewport {
    width: 100%;
    position: relative;
    /* OBRIGATÓRIO: Visible permite que os cards laterais sejam vistos */
    overflow: visible; 
    margin: 0 auto;
}

/* Se for item único, centraliza e não deixa vazar */
.single-case-view .cases__slider {
    display: flex;
    justify-content: center;
}

.cases__slider {
    padding: 4rem 0;
    overflow: visible;
    width: 100%;
}

/* --- Slides (Desktop) --- */
.swiper-slide {
    /* Largura FIXA para garantir que cabem 3 na tela (1 inteiro + 2 metades) */
    width: 480px; 
    height: auto;
    flex-shrink: 0;
    
    /* Efeito de "Fundo" para os cards laterais */
    opacity: 0.4; 
    filter: blur(2px); 
    transform: scale(0.9); 
    transition: all 0.5s ease;
}

/* Slide Central (Ativo) */
.swiper-slide-active {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
    z-index: 10;
    /* Sombra mais forte para destacar o centro */
    box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
}

/* --- Card Interno --- */
.case__card {
    background-color: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    text-align: left;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    position: relative;
    border: 1px solid #e0e0e0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Garante que o conteúdo não vaze do card arredondado */
    overflow: visible; 
}

.swiper-slide-active .case__card {
    border-color: transparent;
}

/* Borda preta estilizada apenas no ativo */
.swiper-slide-active .case__card::before {
    content: '';
    position: absolute;
    top: -6px; left: -6px; right: -6px; bottom: -6px;
    border: 2px solid #000;
    border-radius: 25px;
    z-index: -1;
}

.card__header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
    margin-top: -6.5rem; 
}

.author__img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: relative;
    z-index: 2;
}

.company__logo_background {
    background-color: #95BED4;
    padding: 0.6rem 1.8rem 0.6rem 3rem; 
    border-radius: 20px;
    margin-left: -50px; 
    z-index: 1;
}

.company__logo {
    padding-left: 10px;
    max-height: 35px;
}

.card__title {
    font-family: 'Space Grotesk', sans-serif; 
    font-size: 1.5rem; 
    font-weight: 900;
    color: #000; 
    margin-bottom: 1rem; 
    display: flex; 
    align-items: center;
}

.card__title span {
    display: inline-block; width: 25px; height: 3px;
    background-color: var(--primary-red); margin-right: 1rem;
}

.case__card p {
    line-height: 1.6; margin-bottom: 1.5rem; color: #555;
}

.author__info {
    display: block; font-size: 0.9rem; color: #777; margin-bottom: 2rem;
}

.case__button {
    background-color: var(--primary-red); 
    color: white; 
    text-align: center;
    padding: 1rem 2rem;
    border-radius: 8px; 
    font-weight: bold; 
    display: inline-block; 
    transition: background-color .3s;
}

.case__button:hover {
    background-color: #c00;
}

/* --- Navegação --- */
.cases__navigation {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 3rem; /* Um pouco mais de espaço */
    position: relative;
    z-index: 20;
}

.swiper-button-next, .swiper-button-prev {
    position: static;
    margin: 0;
    width: 50px;
    height: 50px;
    background-color: var(--primary-red);
    color: white;
    border-radius: 8px;
    /* Garante que os botões funcionem acima de tudo */
    cursor: pointer;
}

.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 1rem;
    font-weight: bold;
}

/* ==================== RESPONSIVIDADE (MOBILE) ==================== */
@media screen and (max-width: 768px) {
    .cases__section {
        padding: 3rem 0;
    }

    .swiper-slide {
        /* No mobile, largura fluida para caber na tela */
        width: 90%; 
        opacity: 1; /* Sem transparência */
        filter: none; /* Sem blur */
        transform: scale(1); 
    }
    
    /* Remove a borda preta no mobile */
    .swiper-slide-active .case__card::before {
        display: none; 
    }
    
    .case__card {
        padding: 2rem 1.5rem;
    }
    
    .card__header {
        margin-top: -5rem;
    }
    
    .author__img {
        width: 80px; height: 80px;
    }
    
    .company__logo_background {
        margin-left: -40px;
    }
}


/* ==================== BLOCO 5: GROW (ALINHAMENTO CORRIGIDO E FINAL) ==================== */

.grow__section {
    position: relative;
    width: 100%;
    min-height: 500px;
    background-image: url(../assets/bkg-diamante.png);
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;

    /* --- ALTERAÇÃO AQUI --- */
    /* Usamos Flexbox para centralizar o conteúdo verticalmente */
    display: flex;
    align-items: center;
}
/* --- ALTERAÇÕES AQUI --- */
.grow__container {
    /* --- PROPRIEDADES REMOVIDAS --- */
    /* Removemos a posição absoluta que causava o problema de alinhamento */
    /* position: absolute; */
    /* top: 50%; */
    /* left: 10%; */
    /* transform: translateY(-50%); */

    /* --- PROPRIEDADES MANTIDAS E AJUSTADAS --- */
    position: relative; /* Necessário para o texto ficar por cima das imagens de fundo */
    z-index: 2;
    color: white;
    text-align: left;
    
    /* Mantemos a largura para o texto não ficar muito extenso */
    width: 45%; 
}

.grow__container h2 {
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.grow__background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.grow__diamond {
    position: absolute;
    right: 0%;
    bottom: 0%;
    width: 80%;
    opacity: 0.8;
    animation: floatDiamond 8s ease-in-out infinite;
    z-index: 1;
}

.grow__person {
    position: absolute;
    right: 5%;
    
    width: 35%;
    animation: floatPerson 6s ease-in-out infinite;
    z-index: 1;
}

/* Keyframes para o efeito de flutuação do diamante */
@keyframes floatDiamond {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, 20px); }
    100% { transform: translate(0, 0px); }
}

/* Keyframes para o efeito de flutuação do rapaz */
@keyframes floatPerson {
    0% { transform: translate(0, 0px); }
    50% { transform: translate(0, -15px); }
    100% { transform: translate(0, 0px); }
}

/* Para o efeito de fundo (GROW GROW GROW) */
.grow__section::before {
    content: "GROW";
    position: absolute;
    top: 10%;
    left: 5%;
    font-size: 8em;
    color: rgba(255, 255, 255, 0.05);
    z-index: 0;
    animation: fadeGrow1 15s linear infinite;
}

.grow__section::after {
    content: "GROW";
    position: absolute;
    bottom: 5%;
    right: 10%;
    font-size: 10em;
    color: rgba(255, 255, 255, 0.03);
    z-index: 0;
    animation: fadeGrow2 18s linear infinite;
}

@keyframes fadeGrow1 {
    0% { opacity: 0.05; transform: scale(1); }
    50% { opacity: 0.03; transform: scale(1.05); }
    100% { opacity: 0.05; transform: scale(1); }
}

@keyframes fadeGrow2 {
    0% { opacity: 0.03; transform: scale(1.05); }
    50% { opacity: 0.06; transform: scale(1); }
    100% { opacity: 0.03; transform: scale(1.05); }
}

.mobile-title {
    display: none;
}

/* --- RESPONSIVIDADE ATUALIZADA E REFINADA --- */
@media (max-width: 768px) {

    .solutions__text-content{
        max-height: 1200px ;
    }

    .grow__section{
        min-height: 400px;
    }

    .images-soluctions{
        gap: 20px;
    }

    /* 1. Ajustes no Container de Texto */
    .grow__container {
       
        transform: translate(-50%, -50%);
        text-align: center;
    }

    .grow__container h2 {
        font-size: 2.5em; /* Reduz o tamanho da fonte para caber melhor */
    }

    /* Esconde o título com efeito de digitação e mostra o título estático */
    .grow__container h2 span#typing-h2 {
        display: none;
    }
    .mobile-title {
        display: block;
    }

    /* 2. Reposicionamento das Imagens de Fundo */
    .grow__person {
        width: 65%;          /* Aumenta a pessoa para ser o foco */
        max-width: 300px;    /* Evita que fique grande demais em tablets */
        bottom: 0;           /* Cola a pessoa na base da seção */
        right: auto;         /* Reseta a posição da direita */
        left: 50%;           /* Centraliza horizontalmente */
        transform: translateX(-50%); /* Ajuste fino da centralização */
        animation: floatPerson 8s ease-in-out infinite; /* Desacelera a animação */
    }

    .grow__diamond {
        width: 100%;         /* O diamante vira um elemento de fundo maior */
        max-width: 450px;
        opacity: 0.5;
        right: 50%;
        bottom: 5%;
        transform: translateX(50%);
        z-index: 0;          /* Fica atrás da pessoa */
    }

    /* 3. Ajustes nos Textos Decorativos "GROW" */
    .grow__section::before,
    .grow__section::after {
        /* Reduzimos drasticamente para não poluir a tela */
        font-size: 5em; 
        opacity: 0.08;
    }

    .grow__section::before {
        top: 10%;
        left: -5%;
    }

    .grow__section::after {
        bottom: 15%;
        right: -10%;
    }
}
/* ==================== BLOCO 6: RODAPÉ ==================== */

.footer {
    background-color: #0a0a0a; /* Cor base escura */
    /* Fundo com 2 camadas: 
       1. Imagem de textura posicionada no canto inferior direito.
       2. Gradiente radial vermelho sutil no centro inferior para o efeito de "glow".
    */
    background-image: 
        url('../assets/bkg-footer.jpg');
    background-size: cover;
    background-position: right bottom;
    padding: 6rem 0 2rem 0;
    text-align: center;
    color: #ffffff;
}

.footer__logo {
    display: inline-flex; /* Para alinhar o texto e a imagem */
    align-items: center;
    gap: 0.5rem;
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 2.5rem;
    color: #ffffff;
    margin-bottom: 2rem;
}

/* Reutilizando a classe do símbolo que já criamos */
.footer .simbolo-cata {
    height: 1.8rem;
    width: auto;
}

.footer__title {
    font-family: var(--font-title);
    font-size: 2.5rem;
    font-weight: 900;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.footer__separator {
    width: 60px;
    height: 2px;
    background-color: var(--primary-red);
    margin: 0 auto 2.5rem auto; /* Centraliza a linha */
}

.footer__contact-info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.contact__details {
    display: flex;
    flex-direction: column; /* Empilha o email e o telefone */
    align-items: flex-start; /* Alinha o texto à esquerda */
    gap: 0.3rem;
}

.contact__details a {
    color: #cccccc;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.contact__details a:hover {
    color: #ffffff;
}

.footer__social {
    display: flex;
    gap: 0.8rem;
}

.footer__social a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: var(--primary-red);
    color: white;
    border-radius: 50%;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.footer__social a:hover {
    transform: scale(1.1);
}

.footer__divider {
    width: 100%;
    border: none;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.15);
    margin-bottom: 1.5rem;
}

.footer__credits {
    font-size: 0.6rem;
    color: white;
}

.footer__credits a {
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
}

.logo-incand{
    max-width: 100px;
}

/* --- Estilos da Seção de Soluções --- */

/* Contêiner principal dos itens interativos (acordeão) */


/* * O item do acordeão (elemento <details>)
 */
.solution-item {
    /* CORREÇÃO PRINCIPAL: Garante que o item ocupe sempre a largura total */
    width: 100%;
    
    background-color: #1a1a1a;
    border: 1px solid #333;
    border-radius: 15px;
    margin-bottom: 0.5rem;
    transition: background-color 0.3s, border-color 0.3s; /* Transição suave */
}

/* Estilo do item quando está ABERTO */
.solution-item[open] {
    background-color: var(--dark-bg); /* Use suas variáveis de cor */
    border-color: var(--primary-red);
}

/* * O título clicável (elemento <summary>)
 */
.solution-item__title {
    padding: 20px;
    font-size: 1.3rem;
    font-family: var(--font-title);
    font-weight: 900;
    color: var(--text-color);
    cursor: pointer;
    list-style: none; /* Remove a seta/marcador padrão do Firefox */
    
    /* Usa Flexbox para alinhar o título e o ícone '+' */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Remove a seta/marcador padrão do Chrome, Safari e Edge */
.solution-item__title::-webkit-details-marker {
    display: none;
}

/* O ícone de '+' (criado com um pseudo-elemento) */
.solution-item__title::after {
    content: '+';
    font-size: 2rem;
    color: var(--primary-red);
    transition: transform 0.3s ease-in-out;
}

/* Muda o ícone para '–' quando o item está ABERTO */
.solution-item[open] > .solution-item__title::after {
    content: '–';
    transform: rotate(180deg); /* Efeito de rotação opcional */
}

/* * O conteúdo que aparece ao abrir
 */
.solution-item__content {
    /* O padding é aplicado aqui para que o conteúdo não fique colado nas bordas */
    padding: 0 20px 20px 20px;
    color: #ccc;
    font-size: 1rem;
    line-height: 1.6;
}

/* Imagem dentro do conteúdo */
.solution-item__content img {
     display: block; /* Necessário para aplicar margens automáticas */
    max-width: 150px; /* Define um tamanho máximo, evitando que a imagem fique gigante */
    width: 100%; /* Garante que a imagem se ajuste se a tela for menor que 250px */
    margin: 0 auto 1.5rem auto; /* Centraliza a imagem e adiciona uma margem inferior */
    border-radius: 10px;
}

/* --- Controle de Visibilidade Mobile vs. Desktop --- */

/* Por padrão, a seção mobile começa escondida */
.solutions-mobile {
    display: none;
}

/* Use uma Media Query para definir quando a versão mobile deve aparecer.
   Ajuste o valor de '768px' conforme o design do seu site. */
@media (max-width: 768px) {
   
    .solutions-mobile {
        display: block; /* Mostra a seção mobile em telas menores */
    }

    /* Opcional: Esconda a versão desktop em telas menores */
    .solutions-desktop {
        display: none; 
    }
}


/* =================================================================== */
/* ==================== ESTILOS RESPONSIVOS ==================== */
/* =================================================================== */

/* Estilos para tablets e ecrãs menores */
@media screen and (max-width: 1024px) {
    /* --- GERAL --- */
    .container {
        padding: 0 1rem; /* Diminui o espaçamento lateral */
    }

    section {
        padding: 4rem 0; /* Diminui o espaçamento vertical das seções */
    }

    /* --- HERO --- */
    .hero__data h1 {
        font-size: 4rem; /* Reduz um pouco o título principal */
    }
    .hero__img {
        max-width: 500px; /* Reduz um pouco a imagem do mockup */
    }

    /* --- SOLUÇÕES --- */
    .solutions__container {
        flex-direction: column; /* Coluna de texto e abas ficam uma sobre a outra */
        gap: 3rem;
    }
    .solutions__text-content {
        flex: 1; /* Permite que o texto ocupe toda a largura */
        text-align: center;
    }
    .section-title::after {
        left: 50%;
        transform: translateX(-50%); /* Centraliza a linha vermelha */
    }

    /* --- TORCH --- */
    .torch__section {
        padding: 4rem 0;
    }
    .torch__container {
        flex-direction: column; /* Empilha a imagem e a caixa de texto */
        align-items: center;
        gap: 2rem;
    }
    .torch__img {
        position: static; /* Remove o posicionamento absoluto */
        transform: none; /* Remove a transformação */
        width: 80%; /* Define uma largura para a imagem */
        max-width: 500px;
        margin-bottom: 2rem;
    }
    .torch__data {
        width: 100%; /* Caixa de texto ocupa toda a largura */
    }

    .torch__img{
        display: none;
    }

    /* --- GROW --- */
    .grow__container h2 {
        font-size: 4.5rem;
    }

    /* --- FOOTER --- */
    .footer__title {
        font-size: 2rem;
    }
}


/* Estilos para telemóveis */
@media screen and (max-width: 768px) {

    .mobile-title{
 display: block;
}


#typing-h2{
    display: none;
}
    .solutions__section{
    display: none; /* Esconde a versão de desktop no mobile */
    }


.solutions-mobile {
    display: block; /* Mostra a versão de mobile */
}
    /* --- CABEÇALHO E NAVEGAÇÃO --- */
    .nav__button {
        display: none; /* Esconde o botão "Fale Conosco" do cabeçalho */
    }
    
    /* --- HERO --- */
    .hero__section {
        height: auto; /* Altura automática para se ajustar ao conteúdo */
        padding: 8rem 0 6rem 0;
        
    }
    .hero__container {
        flex-direction: column; /* Empilha o texto e a imagem */
        text-align: center;
        gap: 3rem;
        padding-bottom: 0;
    }
    .hero__data {
        flex-basis: auto;
    }
    .hero__breadcrumb {
        margin: 0 auto 1.5rem auto; /* Centraliza a linha vermelha */
    }
    .hero__data h1 {
        font-size: 3.5rem; /* Reduz ainda mais o título */
    }
    .hero__data p {
        font-size: 1rem;
        max-width: 100%;
    }
    .hero__img {
        flex-basis: auto;
        width: 100%; /* Imagem ocupa a largura toda */
    }
    .hero__scroll {
        bottom: 1.5rem; /* Sobe um pouco a seta */
    }
    .hero__bottom-effect {
       display: none; /* Opcional: remover o efeito em telas pequenas simplifica o visual */
    }

    /* --- MARCAS --- */
    .brands__title-bar {
        flex-direction: column; /* Empilha o título e o carrossel de logos */
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .brands__title-bar h2 {
        font-size: 2.5rem;
        padding-right: 0;
        margin-bottom: 1rem;
        text-align: center;
    }

    /* --- SOLUÇÕES --- */
    .solutions__tabs-container {
        height: 400px; /* Reduz a altura das abas */
    }
    .solution-tab {
        flex: 0 0 60px; /* Abas fechadas ficam mais finas */
    }
    .tab-title {
        font-size: 1.5rem;
    }
    .solution-tab.active .tab-title {
        transform: translate(-50%, -150px);
    }
    .timeline__labels {
        font-size: 0.8rem;
    }
    
    /* --- TORCH --- */
    .torch__data {
        padding: 1.5rem;
    }
    #torch-title {
        font-size: 2rem;
    }
    .torch__features {
        flex-wrap: wrap; /* Permite que os itens quebrem a linha */
        justify-content: center;
    }
    .feature__thumbnail img{
        max-width: 200px;
    }
    
    .feature__thumbnail{
        display: flex;
        justify-content: center;
    }
    .feature__item span{
        color: white;
    }

    .feature__item {
        flex-basis: 45%; /* Cada item ocupa quase metade da largura */
    }

    /* --- CASES --- */
    .slider__viewport {
        max-width: 100%;
        overflow: visible; /* Deixa o swiper controlar o overflow */
    }
    .cases__slider {
        padding: 4rem 0;
    }
    .swiper-slide {
        transform: scale(1); /* Remove o efeito de escala nos slides inativos */
        opacity: 1;
        filter: none;
        width: 100%;
        padding: 0 1rem;
    }
    .case__card {
        padding: 2rem 1.5rem;
    }
    .swiper-slide-active .case__card::before {
        display: none; /* Remove a borda preta extra no mobile */
    }
    .card__header {
        margin-top: -5rem;
    }
    .author__img {
        width: 80px;
        height: 80px;
    }
    .company__logo_background {
        margin-left: -40px;
    }

    /* --- GROW --- */
    .grow__container {
        min-height: 30vh;
        justify-content: center; /* Centraliza o título */
        text-align: center;
    }
    .grow__container h2 {
        font-size: 3rem;
    }

.torch__features {
    display: block; gap: 1.5rem; margin-top: 2rem;
}

    .grow__diamond, .grow__person{
        display: none;
    }

    /* --- FOOTER --- */
    .footer__contact-info {
        flex-direction: column; /* Empilha os detalhes de contato e as redes sociais */
        gap: 2rem;
    }
    .contact__details {
        align-items: center; /* Centraliza os links de contato */
    }

    .seta-banner-img{
        display: none;
    }
}



/* =================================================================== */
/* ==================== ESTILOS PÁGINA DE CASE ======================= */
/* =================================================================== */

/* --- HERO BANNER DO CASE --- */
.case-hero__section {
    background: linear-gradient(to top, #0D0A17, rgba(13, 10, 23, 0.7)), url('assets/grow-bkg.jpg'); /* Use uma imagem de fundo genérica ou específica do case */
    background-size: cover;
    background-position: center;
    padding: 12rem 0 6rem 0;
    text-align: center;
    color: var(--text-color);
}

.case-hero__client-logo {
    max-height: 50px;
    margin-bottom: 1.5rem;
}

.case-hero__data h1 {
    font-size: 4rem;
    font-family: var(--font-title);
    font-weight: 900;
    margin-bottom: 1rem;
}

.case-hero__data p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    color: #ccc;
}

/* --- DETALHES DO CASE (DESAFIO E SOLUÇÃO) --- */
.case-details__section {
    padding: 6rem 0;
    background-color: #fff;
    color: #000;
}

.detail__block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4rem;
    margin-bottom: 5rem;
}
.detail__block:last-child {
    margin-bottom: 0;
}

.detail__block--reverse {
    flex-direction: row-reverse;
}

.detail__text {
    flex: 1;
}

.detail__text p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #333;
}

.detail__icon {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    background-color: var(--primary-red);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 4rem;
}

/* --- RESULTADOS DO CASE --- */
.case-results__section {
    padding: 6rem 0;
    background-color: #f7f7f7;
    text-align: center;
    color: #000;
}

.case-results__container h2 {
    font-size: 3rem;
    font-family: var(--font-title);
    font-weight: 900;
    margin-bottom: 3rem;
}

.results__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.result__card {
    background-color: white;
    padding: 2.5rem 2rem;
    border-radius: 15px;
    border-bottom: 5px solid var(--primary-red);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.result__number {
    display: block;
    font-family: var(--font-title);
    font-size: 4.5rem;
    color: var(--primary-red);
    margin-bottom: 1rem;
    font-weight: 900;
}

.result__description {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.5;
}

/* --- DEPOIMENTO DO CASE --- */
.case-testimonial__section {
    background-color: var(--dark-bg);
    padding: 6rem 0;
    color: var(--text-color);
}
.case-testimonial__container {
    max-width: 800px;
    text-align: center;
}
.testimonial__author-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid var(--primary-red);
    margin-bottom: 2rem;
}
.case-testimonial__container blockquote {
    font-size: 1.5rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    font-style: italic;
}
.case-testimonial__container cite {
    font-size: 1rem;
    font-weight: bold;
    color: #aaa;
    font-style: normal;
}

/* --- RESPONSIVIDADE PARA A PÁGINA DE CASE --- */
@media screen and (max-width: 768px) {
    .case-hero__data h1 {
        font-size: 2.8rem;
    }
    .detail__block {
        flex-direction: column !important; /* Força a coluna em ambos os blocos */
        gap: 2rem;
        text-align: center;
    }
    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* --- ATUALIZAÇÃO DO RODAPÉ --- */
.footer__legal {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin-top: 1.5rem; /* Espaço acima dos links legais */
    padding-top: 1.5rem; /* Espaço que a linha .footer__divider costumava dar */
    padding-bottom: 1.5rem;
}


.footer__legal a:hover {
    color: #fff;
}

/* O footer__credits agora fica dentro do footer__legal */
.footer__credits {
    margin: 0; /* Remove a margem que tinha antes */
    padding: 0;
}