.elementor-257 .elementor-element.elementor-element-012badb{--display:flex;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-257 .elementor-element.elementor-element-b854458{--display:flex;}.elementor-widget-image .widget-image-caption{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-257 .elementor-element.elementor-element-8716bf9{padding:0px 0px 0px 0px;}.elementor-257 .elementor-element.elementor-element-8716bf9 img{width:80%;border-radius:10px 10px 10px 10px;}.elementor-257 .elementor-element.elementor-element-086ff57{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-257 .elementor-element.elementor-element-d319823{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 80px 0px 80px;}.elementor-257 .elementor-element.elementor-element-d319823 .elementor-heading-title{color:#FFFFFF;}/* Start custom CSS for html, class: .elementor-element-3d5d666 *//* ======================================= */
/* ANIMAÇÕES (Para a entrada suave dos elementos) */
/* ======================================= */
@keyframes fadeInSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}


/* ======================================= */
/* 1. LAYOUT PRINCIPAL E TIPOGRAFIA */
/* ======================================= */
.hero-intro-section {
    background-color: #000; /* Fundo escuro */
    padding: 100px 50px; /* Padding vertical generoso */
    color: #fff;
    font-family: Arial, sans-serif;
    
    /* LAYOUT: CSS Grid para criar duas colunas no desktop */
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Coluna do título ligeiramente mais larga */
    gap: 80px; /* Espaço entre as colunas */
    max-width: 1300px;
    margin: 0 auto;
    align-items: flex-start; /* Alinha o conteúdo ao topo */
}

.intro-headline-container, .intro-text-container {
    opacity: 0; /* Oculta inicialmente para a animação */
    animation: fadeInSlideUp 1s ease-out forwards;
}

/* Atraso na animação para o segundo bloco */
.intro-text-container {
    animation-delay: 0.3s;
}

/* ======================================= */
/* 2. TÍTULO E DESTAQUES (Coluna Esquerda) */
/* ======================================= */
.intro-title {
    font-size: 56px; /* Título grande e impactante */
    font-weight: 800; /* Extra bold */
    line-height: 1.1;
    color: #fff;
    margin-top: 0;
    margin-bottom: 50px;
}

.intro-stats {
    display: flex;
    gap: 60px; /* Espaço entre os dois números */
}

.stat-item {
    text-align: left;
}

.stat-number {
    font-size: 58px; /* Número grande */
    font-weight: 800;
    color: #e95b0d; /* Cor de destaque (Laranja) */
    display: block;
    line-height: 1;
}

.stat-label {
    font-size: 18px;
    font-weight: 500;
    color: #ccc; /* Cinza suave */
    margin-top: 5px;
}

/* ======================================= */
/* 3. TEXTO DESCRITIVO (Coluna Direita) */
/* ======================================= */
.intro-text {
    font-size: 18px;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 25px;
}

.intro-text-final {
    font-size: 18px;
    line-height: 1.8;
    color: #fff; /* Branco puro para a conclusão */
    font-weight: bold; /* Destaca a frase final */
}

/* ======================================= */
/* 4. RESPONSIVIDADE (MOBILE E TABLET) */
/* ======================================= */
@media screen and (max-width: 992px) {
    .hero-intro-section {
        /* Transforma em uma única coluna empilhada */
        grid-template-columns: 1fr; 
        padding: 80px 30px;
        gap: 40px;
    }

    .intro-title {
        font-size: 44px; /* Título menor para tablets */
        text-align: center;
        margin-bottom: 30px;
    }
    
    .intro-headline-container {
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* Linha divisória sutil */
    }

    .intro-stats {
        justify-content: center; /* Centraliza números no mobile */
        gap: 40px;
    }
    
    .stat-number {
        font-size: 48px;
        text-align: center;
    }
    
    .stat-label {
        text-align: center;
        font-size: 16px;
    }

    .intro-text, .intro-text-final {
        font-size: 16px;
    }
}

@media screen and (max-width: 576px) {
    .intro-title {
        font-size: 34px; /* Título ainda menor para celulares pequenos */
    }
    .hero-intro-section {
        padding: 50px 20px;
    }
}/* End custom CSS */