/* --- RESET E GERAL --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* A TRAVA: Impede o site de balançar para os lados em qualquer telemóvel */
html, body { 
    font-family: 'Poppins', sans-serif; 
    overflow-x: hidden; 
    width: 100%; 
    position: relative;
    background-color: #fff; 
}
a { text-decoration: none; transition: 0.3s; }
ul { list-style: none; }

:root {
    --cyan: #00E0FF;
    --dark-bg: #050E18;
    --white: #ffffff;
}

html { scroll-behavior: smooth; }
.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; position: relative; height: 100%; }

/* --- HEADER TRANSPARENTE --- */
/* --- HEADER FIXO COM DEGRADÊ --- */
.header { 
    /* 1. O DEGRADÊ: Vai de um azul bem escuro para um azul levemente mais claro */
    background: linear-gradient(to right, #010a13, #012a42); 
    
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);     
    
    /* 2. A MÁGICA DA ROLAGEM: Fixa o menu na tela do usuário */
    position: fixed;      
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999; /* Aumentei o z-index para garantir que ele passe por cima de todas as fotos e textos */
    
    /* Diminuí um pouquinho o padding (de 25px para 15px) para o menu não ocupar muito espaço da tela enquanto o cliente lê o site */
    padding: 15px 0; 
    
    /* Sombra suave para dar sensação de que o menu está flutuando acima do site */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.header-content { display: flex; justify-content: space-between; align-items: center; }
.logo img { height: 85px; display: block; }

.nav-wrapper { display: flex; align-items: center; gap: 40px; }
.nav-wrapper nav a { color: var(--cyan); font-size: 14px; margin-right: 20px; font-weight: 500; }
.nav-wrapper nav a:hover { color: #fff; font-weight: 700; }

.header-buttons { display: flex; gap: 10px; }
.header-buttons .btn-outline-dark { border: 1px solid var(--cyan); color: var(--cyan); background: transparent; padding: 10px 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; border-radius: 4px; }
.header-buttons .btn-outline-dark:hover { background: var(--cyan); color: #000; }
.header-buttons .btn-black { background: var(--cyan); color: #000; border: 1px solid var(--cyan); padding: 10px 24px; font-size: 13px; font-weight: 600; text-transform: uppercase; border-radius: 4px; }
.header-buttons .btn-black:hover { background: #fff; border-color: #fff; }

/* --- HERO SECTION (100% FIEL AO FIGMA) --- */
.hero {
    background: radial-gradient(circle at 50% 30%, #012a42 0%, #010a13 100%);
    position: relative;
    padding-top: 150px; 
    min-height: 850px; /* A MÁGICA 1: Garante espaço suficiente no seu notebook para nada se esmagar */
    overflow: hidden; 
}

/* O Chão Cinza do Figma */
.hero-floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 300px; /* Altura ideal para o carro sentar e os botões caberem */
    background-color: #E6E8EA;
    z-index: 1;
}

/* =========================================
   VEÍCULOS (LATERAIS E SEM CORTES)
   ========================================= */
.vehicles-left-figma {
    position: absolute;
    bottom: 0; 
    left: 1vw; 
    width: 30vw; /* Reduzido de 45vw para não esmagar o centro */
    max-width: 500px;
    min-width: 250px; /* Reduzido drasticamente para ecrãs menores */
    z-index: 5;
}
.img-van {
    width: 85%;
    display: block;
    position: relative;
    z-index: 1;
    /* ADICIONE ESTA LINHA ABAIXO: */
    transform: translateY(-100px); /* Isso espelha a imagem horizontalmente */
    filter: drop-shadow(0px 15px 15px rgba(0, 0, 0, 0.4));
}
.img-moto { 
    position: absolute; 
    width: 50%; 
    left: -2%; 
    bottom: 0px; /* A MÁGICA 2: Base da moto alinhada com a van = Roda nunca mais será cortada! */
    transform: translateY(-30px);
    z-index: 2; 
    filter: drop-shadow(0px 15px 15px rgba(0, 0, 0, 0.4));
}

.vehicles-right-figma {
    position: absolute;
    bottom: 0; 
    right: -2vw; 
    width: 35vw; /* Reduzido de 50vw */
    max-width: 450px;
    min-width: 240px; /* Reduzido drasticamente */
    z-index: 5;
    transform: translateY(-100px); 
}
.img-carro { width: 100%; display: block; }

/* =========================================
   ESTATÍSTICAS (PROFISSIONAIS E DINÂMICAS)
   ========================================= */
.hero-stats-figma {
    position: absolute;
    bottom: 155px; /* Ajuste para flutuar no chão cinzento */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 850px;
    z-index: 10;
    text-align: center;
}

.stats-title-figma {
    color: #164060; /* Azul escuro sofisticado */
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 25px;
}

.stats-row-figma {
    display: flex;
    justify-content: center;
    gap: 20px; /* Reduzido de 45px para dar mais espaço aos carros */
    flex-wrap: wrap; /* MÁGICA 1: Se a tela for muito pequena, joga os itens para a linha de baixo de forma elegante */
}

.stat-item-figma {
    text-align: center;
}

.stat-val-figma {
    position: relative; /* Base para o efeito de brilho */
    /* MÁGICA 2: O clamp ajusta o tamanho da fonte com base na largura da tela */
    font-size: clamp(1.8rem, 2.5vw, 2.8rem); 
    font-weight: 800;
    color: #000; /* Cor base para contraste */
    line-height: 1;
    margin-bottom: 8px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    overflow: hidden; /* Corta o brilho que vazar */
}

.stat-suffix-figma {
    font-size: 2rem;
    color: #000;
    margin-left: 2px;
}

.stat-desc-figma {
    font-size: 0.9rem;
    font-weight: 700;
    color: #555;
}

/* =========================================
   EFEITO DE LUZ VARREDORA (SWEEP)
   ========================================= */
.iridescent-numbers {
    color: transparent; /* Torna o texto transparente para o efeito funcionar */
}

.iridescent-numbers .odometer-value,
.iridescent-numbers .stat-suffix-figma {
    background-image: linear-gradient(
        to right,
        #000 30%,    /* Cor base (preto) */
        var(--cyan) 50%, /* O brilho ciano no meio */
        #000 70%     /* Volta pro preto */
    );
    background-size: 200% auto;
    color: #000; /* Cor de fallback */
    background-clip: text; /* Corta o fundo no formato do texto */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* Faz o preenchimento do texto transparente */
    
    /* Inicia a animação */
    animation: lightSweep 4s ease-out infinite; 
}

@keyframes lightSweep {
    to { background-position: 200% center; } /* Move o gradiente horizontalmente */
}

/* Ajuste Responsivo para Telemóveis */
@media (max-width: 900px) {
    .hero-stats-figma {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin: 50px auto;
        padding: 0 20px;
    }
    .stats-row-figma {
        flex-wrap: wrap;
        gap: 30px;
    }
    .stat-item-figma { width: 45%; }
    .stat-val-figma { font-size: 2rem; }
}

.hero-cta-figma {
    position: absolute;
    bottom: 70px; /* Alinha perfeitamente no meio do chão cinza */
    left: 50%;
    transform: translateX(-50%); /* Trava os botões no centro absoluto da tela */
    display: flex;
    gap: 20px;
    z-index: 10;
}

.btn-black-figma {
    background: var(--cyan); /* Fundo azul ciano */
    color: #000; /* Letra preta */
    padding: 15px 40px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--cyan); /* Borda azul ciano */
    border-radius: 4px; /* Cantinhos arredondados iguais aos do topo */
    text-transform: uppercase; /* Deixa as letras todas maiúsculas */
    transition: 0.3s;
}

.btn-black-figma:hover { 
    background: #fff; /* Fica branco ao passar o mouse */
    border-color: #fff; 
    color: #000;
}

.btn-black-outline-figma {
    background: #000;
    color: var(--cyan);
    padding: 15px 40px;
    font-size: 14px;
    font-weight: 600;
    border: 2px solid var(--cyan);
    transition: 0.3s;
}
.btn-black-outline-figma:hover { background: var(--cyan); color: #000; }

/* =========================================
   TEXTOS E CONTAINER (TOPO E MEIO)
   ========================================= */
.hero-container-figma {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
}

/* Distribui a Logo Gigante e o Título */
.hero-top-figma {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Alinha pelo centro para evitar sobreposição */
    gap: 30px; /* MÁGICA 1: Garante que nunca se encostam */
    margin-bottom: 50px;
}
.hero-logo-giant {
    width: 35vw; 
    max-width: 380px; /* Reduzido ligeiramente para dar espaço ao texto */
}
.hero-title-figma {
    /* MÁGICA 2: O clamp ajusta o tamanho da fonte com base na largura do ecrã */
    font-size: clamp(2rem, 3.5vw, 3.5rem); 
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    text-align: right;
}

/* Textos Centrais */
.hero-middle-figma {
    text-align: center;
    color: #fff;
    margin-bottom: 40px;
}
.hero-middle-figma h2 { font-size: 1.4rem; font-weight: 600; margin-bottom: 30px; }
.hero-p-figma { font-size: 1.2rem; font-weight: 700; margin-bottom: 30px; line-height: 1.5; }
.link-numeros-figma { 
    color: #164060; /* MUDE AQUI: Azul escuro para fazer contraste com o chão cinzento */
    font-size: 1.3rem; 
    font-weight: 700; 
    display: inline-block; 
    transition: 0.3s; 
    
    /* MUDE AQUI: Estas 3 linhas garantem que ele desce para o chão cinzento e fica visível */
    margin-top: 80px; 
    position: relative;
    z-index: 10;
}
.link-numeros-figma:hover { 
    color: #000; 
}

/* =========================================
   RESPONSIVIDADE (CELULAR E TABLET)
   ========================================= */
@media (max-width: 1024px) {
    .hero-title-figma { font-size: 2.8rem; }
    .hero-logo-giant { max-width: 350px; }
}
@media (max-width: 900px) {
    .hero { min-height: auto; padding-bottom: 40px; }
    .hero-floor { display: none; }
    .hero-top-figma { flex-direction: column; align-items: center; gap: 30px; }
    .hero-title-figma { font-size: 2.2rem; text-align: center; }
    
    .vehicles-left-figma, .vehicles-right-figma {
        position: relative; width: 90%; max-width: 400px; min-width: auto; left: auto; right: auto; bottom: auto; margin: 0 auto; display: block;
    }
    .vehicles-right-figma { margin-top: 20px; }
    .hero-cta-figma { position: relative; bottom: auto; left: auto; transform: none; flex-direction: column; width: 100%; padding: 0 20px; margin-top: 30px; }
    .btn-black-figma, .btn-black-outline-figma { width: 100%; text-align: center; }
}

/* --- SEÇÃO QUEM SOMOS --- */
.about {
    background-color: #E6E8EA; /* O fundo cinza do print */
    padding: 100px 0;
    color: #333; /* Texto escuro padrão */
}

.about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px; /* Espaço entre texto e imagem */
}

/* Coluna de Texto */
.about-text {
    flex: 1; /* Ocupa metade da tela */
    max-width: 500px;
}

.tag {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    text-transform: capitalize;
    display: block;
    margin-bottom: 10px;
}

.about-text h2 {
    font-size: 3rem; /* Título Grande */
    line-height: 1.1;
    color: #000;
    font-weight: 700;
    margin-bottom: 30px;
}

.description {
    font-size: 1rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 40px;
}

/* Lista com Ícones */
.about-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 50px;
}

.about-list li {
    display: flex;
    align-items: center;
    gap: 15px;      /* Distância entre o ícone e o texto */
    font-weight: 500;
    color: #333;
    margin-bottom: 15px; /* Espaço entre cada linha da lista */
}

.about-list i {
    font-size: 24px; /* Tamanho do ícone */
    color: #000;     /* Cor preta (ou use #333 para cinza escuro) */
}

/* Botões da Seção */
.about-actions {
    display: flex;
    align-items: center;
    gap: 30px;
}

.btn-outline-gray {
    border: 1px solid #333;
    color: #333;
    padding: 12px 30px;
    font-weight: 600;
    border-radius: 4px; /* Levemente arredondado */
}
.btn-outline-gray:hover {
    background: #333;
    color: #fff;
}

.link-arrow {
    color: #333;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px;
}
.link-arrow:hover { text-decoration: underline; }

/* Coluna da Imagem */
.about-image {
    flex: 1;
}
.about-image img {
    width: 100%;
    max-width: 600px;
    /* Dica: Adiciona uma sombra suave na imagem 3D se quiser destacar */
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.1)); 
}

/* Mobile Responsivo */
@media (max-width: 900px) {
    .about-content { flex-direction: column-reverse; } /* Imagem em cima ou embaixo? Teste aqui */
    .about-text { text-align: center; }
    .about-list li { justify-content: center; }
    .about-actions { justify-content: center; }
    .tag { display: inline-block; }
}

/* --- SEÇÃO SERVIÇOS --- */
.services {
    padding: 100px 0;
    background-color: #fff; /* Fundo branco */
}

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

.tag-center {
    font-size: 25px; 
    font-weight: 700;
    color: #333;
    display: block;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.section-header h2 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: #000;
}

.section-subtitle {
    font-size: 1.1rem;
    color: #666;
}

/* Grid de Cards (4 Colunas) */
.services-grid {
    display: grid;
    /* Cria 4 colunas de tamanho igual */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; /* Espaço entre os cards */
}

.service-card {
    border: 1px solid #555;
    background: #fff;
    transition: transform 0.3s;
}

.service-card:hover {
    transform: translateY(-5px); /* Efeito de subir ao passar o mouse */
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.card-image img {
    width: 100%;
    height: 220px; /* Altura fixa para todas ficarem iguais */
    object-fit: cover; /* Corta a imagem para preencher sem esticar */
    display: block;
}

.card-content {
    padding: 25px;
    text-align: left;
}

.card-tag {
    font-size: 12px;
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

.service-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
    color: #000;
}

.service-card p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
}

/* =========================================
   RESPONSIVIDADE DA TELA INICIAL (CELULAR)
   ========================================= */
@media (max-width: 900px) {
    .hero { min-height: auto; padding-bottom: 50px; }
    .hero-floor { display: none; }
    
    .hero-top-figma { flex-direction: column; align-items: center; gap: 15px; }
    .hero-title-figma { font-size: 2.2rem; text-align: center; }
    
    /* Esconde a logo gigante duplicada no celular para economizar espaço */
    .hero-logo-giant { display: none; }
    
    /* 1. MÁGICA DA TROCA: Esconde os veículos separados do PC */
    .vehicles-left-figma, .vehicles-right-figma {
        display: none !important;
    }

    /* 2. MÁGICA DA TROCA: Mostra a sua nova imagem apenas no celular */
    .vehicles-mobile {
        display: flex !important; 
        justify-content: center;
        width: 90%; 
        max-width: 350px; 
        margin: 20px auto 40px auto; 
        
        /* A MÁGICA DA ANIMAÇÃO: Faz a imagem surgir de baixo para cima */
        animation: fadeUpMobile 1.2s ease-out forwards;
    }
    
    .vehicles-mobile img {
        width: 100%;
        height: auto;
        filter: drop-shadow(0px 10px 15px rgba(0,0,0,0.4)); /* Dá aquela sombra de "chão" maravilhosa */
    }
    
    /* Organiza os botões no final da seção */
    .hero-cta-figma { position: relative; bottom: auto; left: auto; transform: none; flex-direction: column; width: 100%; padding: 0 20px; margin-top: 30px; }
    .btn-black-figma, .btn-black-outline-figma { width: 100%; text-align: center; }
}

/* --- SEÇÃO DIFERENCIAIS --- */
.features {
    background: radial-gradient(circle at 50% 50%, #082032 0%, #010a13 100%); /* Fundo azul escuro */
    padding: 100px 0;
    color: #fff;
}

.section-header-dark {
    text-align: center;
    margin-bottom: 60px;
}
.section-header-dark h2 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
.section-subtitle-light { color: #aaa; font-size: 1.1rem; }

/* Grid Principal (Esquerda Grande | Direita Pequenos) */
.features-wrapper {
    display: grid;
    grid-template-columns: 1.3fr 1.7fr; /* A esquerda é um pouco menor que a direita somada */
    gap: 20px;
    height: 650px; /* Altura fixa para alinhar tudo */
}

/* Estilo Geral dos Cards */
.feature-card {
    position: relative;
    border-radius: 4px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* ADICIONE ESTA LINHA: */
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Sombra escura em cima da foto */
.overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 100%);
    z-index: 1;
    transition: opacity 0.4s ease;
}

/* Card Grande (Esquerda) */
.feature-content {
    position: relative;
    z-index: 2;
    padding: 40px;
}

.feature-tag {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    display: block;
    opacity: 0.8;
}

.feature-card h3 { font-size: 2rem; margin-bottom: 15px; font-weight: 700; }
.feature-card p { color: #ccc; margin-bottom: 30px; line-height: 1.6; max-width: 90%; }

.feature-actions { display: flex; gap: 20px; align-items: center; }

.btn-outline-light {
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    padding: 10px 25px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}
.btn-outline-light:hover { background: #fff; color: #000; }

.link-light { color: #fff; font-weight: 600; display: flex; align-items: center; gap: 5px; }
.link-light:hover { color: var(--cyan); }


/* Grid Pequeno (Direita) */
.small-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 colunas */
    grid-template-rows: 1fr 1fr;    /* 2 linhas */
    gap: 20px;
}

.feature-content-small {
    position: relative;
    z-index: 2;
    padding: 25px;
}

.box-icon {
    font-size: 32px;
    color: #fff;
    margin-bottom: 15px;
    display: block;
    /* ADICIONE ESTA LINHA: */
    transition: transform 0.4s ease, color 0.4s ease;
}

.feature-card.small h3 { font-size: 1.3rem; margin-bottom: 5px; }
.feature-card.small p { font-size: 0.9rem; margin-bottom: 0; }

/* =========================================
   AJUSTE DE TEXTO E ESPAÇO NO MOBILE (DIFERENCIAIS)
   ========================================= */
@media (max-width: 900px) {
    /* Diminui o buraco (espaçamento) entre o título e os cartões */
    .section-header-dark {
        margin-bottom: 30px; 
    }

    /* Diminui a letra gigante do "Por que escolher a GTFLEX" */
    .section-header-dark h2 {
        font-size: 2rem; /* Antes era 3rem */
        line-height: 1.2; /* Deixa as linhas do texto mais juntinhas */
    }
}

/* --- EFEITOS DE HOVER (MOUSE EM CIMA) DOS CARDS --- */

/* 1. O card sobe e ganha uma sombra com um leve tom do seu Cyan (#00E0FF) */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 224, 255, 0.15); /* Sombra elegante neon */
    z-index: 10; /* Garante que ele fique por cima dos outros ao dar zoom */
}

/* 2. A foto "acende" (o overlay fica levemente transparente) */
.feature-card:hover .overlay {
    opacity: 0.6; 
}
.feature-card:hover .overlay-double {
    opacity: 0.8; /* Clareia menos para não prejudicar a leitura do texto grande */
}

/* 3. O ícone pula, cresce um pouquinho e fica azul (cyan) */
.feature-card:hover .box-icon {
    transform: scale(1.1) translateY(-5px);
    color: var(--cyan);
}


/* Responsivo - Seção Diferenciais */
@media (max-width: 900px) {
    .features-wrapper { 
        grid-template-columns: 1fr; 
        height: auto; 
    }
    
    /* A CORREÇÃO DO BOTÃO: Tiramos a altura fixa e deixamos crescer livremente */
    .feature-card.large { 
        height: auto; 
        min-height: 480px; /* Garante que fica grande, mas pode crescer mais se precisar */
    }
    
    /* A CORREÇÃO DOS CARDS PEQUENOS (Mantida) */
    .small-grid { 
        height: auto; 
        grid-template-columns: 1fr; 
        grid-template-rows: auto;   
    }
    
    .feature-card.small { 
        height: 220px; 
    }
}

/* --- AJUSTES FINAIS DA SEÇÃO DIFERENCIAIS --- */

/* 1. Força a cor Branca na Tag */
.text-white {
    color: #ffffff !important;
    opacity: 0.9;
}

/* 2. Classe Mágica: Joga o conteúdo para o TOPO */
.feature-card.top-text {
    justify-content: flex-start; /* O padrão é flex-end (baixo), aqui mudamos para start (topo) */
}

/* 3. Sombra Invertida: Escura em cima (pra ler o texto) e clara embaixo (pra ver a foto) */
.overlay-top {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.0) 80%);
    z-index: 1;
}

/* --- AJUSTE CARD GRANDE (Texto Topo / Botões Baixo) --- */

/* 1. Faz o conteúdo ocupar 100% da altura do card */
.feature-card.large .feature-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Começa alinhando tudo no topo */
}

/* 2. O TRUQUE: Empurra os botões para o final do card */
.feature-actions {
    margin-top: auto; /* Essa margem "automática" ocupa todo o espaço vazio */
    width: 100%;      /* Garante que o botão não encolha */
}

/* 3. Sombra Dupla (Escura no Topo E no Baixo) */
/* Substitua a classe .overlay-top anterior por esta, ou crie essa nova */
.overlay-double {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Gradiente ajustado: Escuro no topo até o meio do card, depois clareia e escurece na base */
    background: linear-gradient(to bottom, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0.8) 40%,  /* Mantém bem escuro até cobrir o texto todo */
        rgba(0,0,0,0.1) 70%,  /* Revela a foto no meio/baixo */
        rgba(0,0,0,0.9) 100%
    );
    z-index: 1;
    transition: opacity 0.4s ease;
}
/* --- SEÇÃO PROCESSO --- */
.process {
    background-color: #E6E8EA; /* Mesmo cinza da seção "Quem Somos" */
    padding: 100px 0;
}

/* Reutilizando estilos de header que já criamos, mas garantindo a cor escura */
.process .section-header h2 { color: #000; }
.process .section-subtitle { color: #555; }

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

.process-card {
    background: #fff;
    border: 1px solid #555; /* Borda fina cinza */
    display: flex;
    flex-direction: column; /* Organiza verticalmente: Texto em cima, Foto embaixo */
    justify-content: space-between; /* Garante que a foto vá para o fundo */
    height: 100%; /* Faz todos os cards terem a mesma altura */
    transition: transform 0.3s;
}

.process-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* Parte de Texto (Topo) */
.process-text {
    padding: 35px;
}

.process-tag {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
    color: #333;
}

.process-card h3 {
    font-size: 1.6rem; /* Título bem legível */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #000;
}

.process-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* Parte da Imagem (Rodapé do Card) */
.process-img {
    width: 100%;
    margin-top: auto; /* Empurra a imagem para o final do card se sobrar espaço */
}

.process-img img {
    width: 100%;
    height: 250px; /* Altura fixa para alinhar */
    object-fit: cover; /* Corta para preencher sem esticar */
    display: block; /* Remove espaços brancos extras */
}

/* Responsivo */
@media (max-width: 900px) {
    .process-grid {
        grid-template-columns: 1fr; /* Um embaixo do outro no celular */
    }
    .process-img img { height: 200px; }
}
/* --- SEÇÃO COBERTURA --- */
.coverage {
    padding: 100px 0;
    background-color: #fff;
}

/* Modifique esta classe existente */
.coverage-header {
    margin-bottom: 0; /* Antes era 60px */
    max-width: 600px;
}

/* Novo botão alinhado com a lista */
.coverage-action {
    margin-top: 20px;
}

/* Layout do topo da seção Cobertura (Texto + Logo) */
.coverage-header-wrapper {
    display: flex;
    justify-content: space-between; /* Joga o texto pra esquerda e logo pra direita */
    align-items: center;
    margin-bottom: 60px;
    width: 100%;
}

.coverage-header-logo img {
    height: 100px; /* Ajuste esse tamanho conforme a necessidade do logo exportado do Figma */
    object-fit: contain;
}

.tag-left {
    font-size: 23px;
    font-weight: 700;
    color: #333;
    display: block;
    margin-bottom: 10px;
}

.coverage-header h2 { font-size: 3rem; font-weight: 700; margin-bottom: 15px; color: #000; }
.coverage-header p { font-size: 1.1rem; color: #555; }

/* Layout Lado a Lado */
/* O container que segura o texto e a imagem */
.coverage-content {
    display: flex;
    gap: 80px; 
    margin-bottom: 100px;
    
    /* MUDE AQUI: De 'center' para 'flex-start' */
    align-items: flex-start; 
}

/* Lista da Esquerda */
.coverage-list {
    flex: 1; /* Ocupa o espaço normal dela */
    display: flex;
    flex-direction: column;
    gap: 35px; /* Devolve o espaçamento natural e bonito entre os bloquinhos de texto */
}

.region-item {
    padding-left: 25px;
    border-left: 2px solid #E0E0E0; /* Linha cinza inativa */
    transition: 0.3s;
    cursor: pointer;
}

/* 3. A coluna da imagem e a imagem em si */
.coverage-image {
    flex: 1.4; /* Faz a foto ficar um pouco mais larga (horizontal) que o texto */
}

.coverage-image img {
    width: 100%;
    height: 400px; /* Altura fixa e controlada. Não vai mais ficar gigante! */
    object-fit: cover; /* Faz o recorte perfeito para caber nos 400px de altura */
    object-position: center;
    border-radius: 4px; /* Mantém as bordinhas do design */
    display: block;
}

/* Estado Ativo (O primeiro item) */
.region-item.active {
    border-left: 4px solid #000; /* Linha preta grossa */
}

.region-item:hover {
    border-left-color: #999; /* Escurece um pouco ao passar o mouse */
}

.region-item h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #000;
}

.region-item p {
    color: #666;
    margin-bottom: 15px;
    line-height: 1.6;
}

.link-small {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    display: flex;
    align-items: center;
    gap: 5px;
}
.link-small:hover { text-decoration: underline; }


/* Faixa de Logos */
.logo-strip {
    text-align: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 60px;
}

.logos-title {
    font-size: 20px;
    font-weight: 600;
    color: #000;
    margin-bottom: 40px;
}

.logos-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    opacity: 0.7; /* Logos um pouco transparentes */
}

.logos-grid img {
    max-height: 30px; /* Altura máxima dos logos */
    filter: grayscale(100%); /* Deixa preto e branco para ficar elegante */
    transition: 0.3s;
}

.logos-grid img:hover {
    filter: grayscale(0%); /* Fica colorido ao passar o mouse */
    opacity: 1;
}

/* =========================================
   RESPONSIVO - SEÇÃO COBERTURA
   ========================================= */
@media (max-width: 900px) {
    .coverage-content { flex-direction: column-reverse; gap: 40px; } 
    .logos-grid { justify-content: center; }
    
    .coverage-header-wrapper {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
    
    .coverage-header h1 {
        font-size: 2.2rem;
    }

    /* O CORTE E CENTRALIZAÇÃO DA FOTO DA EQUIPE */
    .coverage-image {
        width: 100%;
        display: flex;
        justify-content: center; /* Garante que fique no centro da tela */
    }

    .coverage-image img {
        height: 260px; /* Encolhe a altura para "cortar" o teto */
        width: 100%;
        max-width: 380px; /* Não deixa a foto ficar super larga e esticada */
        object-position: bottom; /* A MÁGICA: Empurra o teto para fora e foca nas pessoas embaixo */
        margin: 0 auto;
        border-radius: 6px;
    }
}


/* --- SEÇÃO FAQ (Dúvidas) --- */
.faq {
    /* Degradê escuro vindo de cima */
    background: radial-gradient(circle at 50% 0%, #0d2538 0%, #010a13 100%);
    padding: 100px 0;
    color: #fff;
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
}
.faq-header h2 { font-size: 3rem; font-weight: 700; margin-bottom: 10px; }
.faq-header p { color: #aaa; font-size: 1.1rem; }

/* Wrapper das Perguntas */
.faq-wrapper {
    max-width: 800px; /* Largura controlada para não ficar esticado */
    margin: 0 auto 60px auto; /* Centralizado */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #fff;
    border-radius: 4px;
    overflow: hidden; /* Esconde o texto quando fechado */
    transition: 0.3s;
}

/* Parte da Pergunta (Clicável) */
.faq-question {
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: #fff;
}

.faq-question h3 {
    color: #000;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}

.faq-icon {
    color: #000;
    font-size: 20px;
    transition: transform 0.3s; /* Animação de girar */
}

/* Parte da Resposta (Escondida por padrão) */
.faq-answer {
    max-height: 0; /* Altura zero = escondido */
    overflow: hidden;
    padding: 0 25px;
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
    transition: max-height 0.5s ease, padding 0.5s ease;
}

/* ESTADO ATIVO (Quando clica) */
.faq-item.active .faq-icon {
    transform: rotate(45deg); /* O ícone de + vira um X */
}

.faq-item.active .faq-answer {
    max-height: 200px; /* Altura suficiente para mostrar o texto */
    padding-bottom: 25px; /* Adiciona respiro embaixo */
}

/* Rodapé da Seção */
.faq-footer {
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 50px;
    max-width: 600px;
    margin: 0 auto;
}

.faq-footer h3 { font-size: 1.5rem; margin-bottom: 10px; }
.faq-footer p { color: #aaa; margin-bottom: 25px; }

.small-btn {
    padding: 10px 30px;
    font-size: 14px;
    border-color: rgba(255,255,255,0.3);
}
.small-btn:hover { border-color: #fff; background: #fff; color: #000; }
/* --- SEÇÃO FINAL (CTA) --- */
.cta-final {
    padding: 100px 0;
    background: #fff;
}

.cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.cta-text h2 { font-size: 3rem; font-weight: 700; margin-bottom: 15px; color: #000; line-height: 1.1; }
.cta-text p { font-size: 1.1rem; color: #555; margin-bottom: 30px; }
.cta-buttons { display: flex; gap: 15px; }

.cta-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 4px;
    /* Dica: Efeito sutil na foto */
    box-shadow: 20px 20px 0px #f0f0f0; 
}


/* --- RODAPÉ (FOOTER) --- */
.footer {
    background-color: #E6E8EA; /* Cinza do layout */
    padding: 80px 0 30px 0;
    color: #333;
    font-size: 14px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 60px;
}

.footer-col h4 { font-size: 16px; font-weight: 700; margin-bottom: 20px; color: #000; }
.footer-col ul li { margin-bottom: 12px; }
.footer-col ul a { color: #555; font-weight: 500; }
.footer-col ul a:hover { color: #000; text-decoration: underline; }

/* Coluna da Marca e Selo */
.footer-logo { height: 89px; margin-bottom: 20px; display: block; }
.security-seal {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #ccc;
    padding: 8px 15px;
    border-radius: 4px;
    background: #fff;
    color: #008a00; /* Verde de segurança */
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
}
.security-seal i { font-size: 24px; }

/* Newsletter */
.newsletter-col { max-width: 350px; }
.newsletter-col p { color: #555; margin-bottom: 15px; line-height: 1.5; }

.newsletter-form { display: flex; gap: 10px; margin-bottom: 15px; }
.newsletter-form input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    background: #fff; /* Fundo do input mais claro */
    border-radius: 2px;
}
.newsletter-form button {
    padding: 10px 20px;
    background: transparent;
    border: 1px solid #333;
    color: #333;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}
.newsletter-form button:hover { background: #333; color: #fff; }

.privacy-note { font-size: 12px; color: #777; }


/* Rodapé Inferior */
.footer-divider {
    height: 1px;
    background: #ccc;
    margin-bottom: 30px;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal p { color: #666; margin-bottom: 10px; }
.legal-links a { color: #666; margin-right: 15px; text-decoration: underline; }
.legal-links a:hover { color: #000; }

.footer-social { display: flex; gap: 15px; }
.footer-social a {
    color: #333;
    font-size: 20px;
    transition: 0.3s;
}
.footer-social a:hover { color: #000; transform: scale(1.1); }


/* Ajuste de fallback para Odometer carregar limpo */
.odometer.odometer-auto-theme {
    font-family: inherit !important;
    background-color: transparent !important;
}
.odometer.odometer-auto-theme .odometer-inside {
    display: inline-flex !important;
}

/* Garantir formatação correta dos números */
.stat-num-figma {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    display: inline-block;
}

/* Efeito iridescente para os números */
.iridescent-numbers {
    background: linear-gradient(45deg, #000, #00E0FF, #000);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine 3s linear infinite;
}

@keyframes shine {
    to { background-position: 200% center; }
}


/* --- ESTILOS DA PÁGINA SOBRE --- */

.hero-sobre {
    background: radial-gradient(circle at 50% 30%, #012a42 0%, #010a13 100%);
    /* Aumentei o padding do topo para descer depois do menu */
    padding-top: 180px; 
    padding-bottom: 50px;
    min-height: 380px; 
    display: flex;
    align-items: flex-end; /* Joga tudo para a base da seção */
}

.hero-sobre-content {
    display: flex;
    justify-content: space-between; /* Joga o Título para a Esquerda e Logo para a Direita */
    align-items: flex-end; /* Alinha ambos por baixo */
    width: 100%;
}

.hero-sobre h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    /* Faz a linha branca embaixo do texto exatamente como no Figma */
    text-decoration: underline; 
    text-underline-offset: 10px;
    text-decoration-thickness: 4px;
}

.hero-logo-sobre {
    max-width: 450px; /* Aumentei para o tamanho gigante do Figma */
    width: 45vw; /* Responsivo: diminui conforme a tela diminui */
    margin-bottom: 20px; /* Dá uma leve flutuada para não colar no chão */
}

/* Responsivo para telemóveis */
@media (max-width: 900px) {
    .hero-sobre-content {
        flex-direction: column-reverse; /* Logo em cima, texto em baixo */
        align-items: center;
        gap: 40px;
    }
    .hero-sobre h1 {
        font-size: 2.5rem;
        text-align: center;
    }
    .hero-logo-sobre {
        max-width: 300px;
        margin-bottom: 0;
    }
}

/* =========================================
   SEÇÃO HISTÓRIA (PÁGINA SOBRE NÓS)
   ========================================= */
.historia {
    padding: 80px 0 100px 0;
    background-color: #E6E8EA; /* O mesmo cinza da tela inicial */
}

.historia-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide a tela 50% / 50% */
    gap: 60px;
    align-items: start;
}

/* Textos e Sublinhados fiéis ao Figma */
.tag-sobre {
    font-weight: 700;
    font-size: 14px;
    text-decoration: underline;
    margin-bottom: 20px;
    display: block;
    color: #000;
}

.historia-texto h2 {
    font-size: 2.8rem;
    line-height: 1.2;
    text-decoration: underline;
    margin-bottom: 30px;
    color: #000;
}

.historia-texto p {
    margin-bottom: 20px;
    line-height: 1.6;
    color: #000;
    font-weight: 500;
    font-size: 0.95rem;
    /* Faz a linha embaixo de todas as frases como no Figma */
    text-decoration: underline; 
    text-underline-offset: 4px; 
}

/* Imagem da Direita */
.historia-imagem img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1); 
    display: block;
}

/* Botão CONTATO no rodapé direito */
.contato-container-sobre {
    display: flex;
    justify-content: flex-end; /* Joga o botão para a direita */
    margin-top: 50px;
}

.btn-contato-sobre {
    border: 1px solid #000;
    color: #000;
    padding: 15px 60px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btn-contato-sobre:hover {
    background: #000;
    color: #fff;
}

/* --- RESPONSIVO (Tablets e Celulares) --- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 por linha no Tablet maior */
    }
}

/* MUDE AQUI: De 600px para 900px */
@media (max-width: 900px) {
    .services-grid {
        grid-template-columns: 1fr; /* 1 por linha no Celular para não estourar a tela */
    }
    .section-header h2 { font-size: 2.2rem; }
}


/* =========================================
   IMAGEM FINAL DA EQUIPE (PÁGINA SOBRE)
   ========================================= */
.imagem-equipe-final {
    margin-top: 80px; /* Dá um belo respiro depois do botão de contato */
    width: 100%;
}

.imagem-equipe-final img {
    width: 100%;
    max-height: 700px; /* Limite de altura para não virar um "pôster gigante" em telas ultrawide */
    object-fit: cover; /* Corta a imagem perfeitamente sem amassar as pessoas */
    object-position: center; /* Foca no meio da foto */
    display: block;
}

/* Ajuste no padding da seção para a imagem encostar bem no rodapé (opcional) */
.historia {
    padding-bottom: 0; /* Tiramos o espaço sobrando embaixo para a foto ficar mais próxima do footer */
}

/* =========================================
   PÁGINA DE RASTREAMENTO (IFRAME)
   ========================================= */
.iframe-section {
    padding: 60px 0 100px 0;
    background-color: #E6E8EA; /* O mesmo fundo cinza do restante do site */
    min-height: 60vh;
}

.iframe-container {
    width: 100%;
    max-width: 1000px; /* Largura máxima para não ficar esticado demais */
    margin: 0 auto;
    height: 650px; /* Altura da janela do sistema */
    background: #fff;
    border-radius: 8px; /* Cantos arredondados */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); /* Sombra premium */
    overflow: hidden; /* Corta qualquer bordinha que vazar */
    border: 1px solid #ddd;
}

.iframe-container iframe {
    width: 100%;
    height: 100%;
    border: none; /* Tira a borda padrão feia do navegador */
    display: block;
}

/* Responsividade do Iframe para celulares */
@media (max-width: 768px) {
    .iframe-container {
        height: 500px;
    }
}


/* =========================================
   BOTÃO WHATSAPP FLUTUANTE
   ========================================= */
.whatsapp-float {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25d366;
    color: #fff;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Garante que fique por cima de tudo no site */
    transition: all 0.3s ease;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    background-color: #20b858;
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.4);
}

/* Animação que faz o botão pulsar como um "sinal" */
@keyframes pulse-wa {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-float {
    animation: pulse-wa 2s infinite;
}


/* =========================================
   ANIMAÇÃO DE ENTRADA DOS VEÍCULOS (EFEITO DRIVE-IN)
   ========================================= */

/* Aplica a animação nas divs dos veículos */
.vehicles-left-figma {
    /* cubic-bezier cria o efeito suave de "freio" no final */
    animation: driveInLeft 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.vehicles-right-figma {
    animation: driveInRight 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Van e Moto chegam da esquerda */
@keyframes driveInLeft {
    0% { left: -30vw; opacity: 0; }
    100% { left: 1vw; opacity: 1; } /* 1vw é a posição original exata do seu CSS */
}

/* Carro chega da direita */
@keyframes driveInRight {
    0% { right: -30vw; opacity: 0; }
    100% { right: -2vw; opacity: 1; } /* -2vw é a posição original exata do seu CSS */
}

/* AJUSTE PARA CELULARES (Evita que o layout quebre em telas pequenas) */
@media (max-width: 900px) {
    .vehicles-left-figma, .vehicles-right-figma {
        /* No celular, eles vão surgir suavemente de baixo para cima */
        animation: fadeUpMobile 1.2s ease-out forwards;
    }
}

@keyframes fadeUpMobile {
    0% { opacity: 0; transform: translateY(50px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* =========================================
   AJUSTE MOBILE DO CABEÇALHO (MENU)
   ========================================= */
@media (max-width: 900px) {
    /* 1. Transforma a linha reta numa pilha (Logo > Menu > Botões) */
    .header-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .nav-wrapper {
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    
    /* 2. Organiza os links para ficarem lado a lado e quebrarem linha se faltar espaço */
    .nav-wrapper nav {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .nav-wrapper nav a {
        margin-right: 0; /* Tira o espaçamento antigo que empurrava tudo pra direita */
        font-size: 15px; /* Aumenta um pouquinho pra ficar fácil do dedo clicar */
    }
    
    /* 3. Centraliza os botões */
    .header-buttons {
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }

    /* 4. Como o menu empilhado fica mais alto, empurramos o título das páginas para baixo */
    .hero-sobre, .hero {
        padding-top: 300px; /* Aumentei um pouco para dar um respiro perfeito na Home */
    }
}

/* =========================================
   AJUSTE MOBILE DO SISTEMA DE RASTREAMENTO (ZOOM OUT PERFEITO)
   ========================================= */
@media (max-width: 900px) {
    .iframe-section {
        padding: 0;
        background-color: #fff;
        width: 100%;
        overflow: hidden !important;
    }
    
    .iframe-section .container {
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow: hidden !important;
    }
    
    .iframe-container {
        width: 100%; 
        height: 650px; /* Aumentei a altura para garantir que todo o caminho da encomenda apareça */
        position: relative;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden; /* Corta qualquer pontinha invisível que tente esticar a tela */
    }
    
    .iframe-container iframe {
        position: absolute;
        top: 0;
        left: 0;
        
        /* A MÁGICA AQUI: Aumentamos de 1000px para 1250px! 
           Isso dá uma "tela gigante" para o sistema deles respirar e não esmagar o botão Buscar */
        width: 800px !important; 
        height: 800px !important; 
        
        /* Atualizamos a matemática para encolher esses 1250px perfeitamente para o seu ecrã */
        transform: scale(calc(100vw / 1250)); 
        transform-origin: top left;
        border: none;
    }
}

/* Esconde a imagem única do celular quando estiver no PC */
.vehicles-mobile {
    display: none;
}

/* =========================================
   AJUSTE MOBILE - SEÇÃO FINAL (CTA) - LADO A LADO
   ========================================= */
@media (max-width: 900px) {
    /* Mantém lado a lado, mas alinha pelo centro e diminui o buraco */
    .cta-content {
        flex-direction: row; /* Força ficar lado a lado no telemóvel */
        align-items: center;
        gap: 15px; /* Espaço menor entre o texto e a foto */
        padding: 0 10px; 
    }

    /* O texto vai ocupar a maior parte do espaço (55%) */
    .cta-text {
        flex: 1.2; 
        text-align: left;
    }

    /* Diminui BEM o título para caber bonito ao lado da foto */
    .cta-text h2 {
        font-size: 1.6rem; /* Reduzido para caber na coluna */
        margin-bottom: 10px;
        line-height: 1.1;
    }

    /* Diminui o subtítulo */
    .cta-text p {
        font-size: 0.9rem;
        margin-bottom: 15px;
    }

    /* Ajusta o botão para não esticar na tela toda */
    .cta-buttons .btn-black-figma {
        padding: 10px 20px;
        font-size: 12px;
        width: auto;
        display: inline-block;
    }

    /* A foto vai ocupar o resto do espaço (45%) e crescer */
    .cta-image {
        flex: 1;
    }
    
    .cta-image img {
        width: 100%;
        height: auto;
        max-width: none; /* Permite que ela preencha o seu lado */
        box-shadow: 10px 10px 0px #f0f0f0; /* Diminui a sombra que era muito grande no mobile */
    }
}