.elementor-1116 .elementor-element.elementor-element-9b16a74{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-40px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1116 .elementor-element.elementor-element-8313aad{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}@media(max-width:1024px){.elementor-1116 .elementor-element.elementor-element-8313aad{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 112px) 0px;padding:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-1116 .elementor-element.elementor-element-8313aad{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}}/* Start custom CSS for html, class: .elementor-element-8313aad *//* ============================================================
   PAINEL DE CONTROLE - PÁGINA CONTATOS
   ============================================================ */
:root {
    --bg-color: transparent;
    --text-color: #252525;

    /* --- DESKTOP (> 1366px) --- */
    --desk-scroll-height: 400vh; 
    --desk-right-pad: 120px;      
    --desk-left-pad: 120px;
    --desk-logo: 468px;
    --desk-title: 64px;
    --desk-gap-1: 90px;
    --desk-gap-2: 30px;

    /* --- NOTEBOOK (1025px - 1366px) --- */
    --note-scroll-height: 300vh;
    --note-right-pad: 60px;
    --note-left-pad: 50px;
    --note-logo: 280px;
    --note-title: 32px;
    --note-text: 16px;
    --note-gap-1: 30px;
    --note-gap-2: 20px;

    /* --- TABLET (768px - 1024px) --- */
    /* AQUI: Altura do retângulo da imagem no Tablet */
    --tab-gallery-height: 550px; 
    --tab-content-pad: 90px;     
    --tab-logo: 320px;
    --tab-title: 36px;

    /* --- MOBILE (< 768px) --- */
    /* AQUI: Altura do retângulo da imagem no Celular */
    --mob-gallery-height: 40vh;
    --mob-content-pad: 30px;
    --mob-logo: 220px;
    --mob-title: 28px;
}

/* ============================================================
   ESTRUTURA BASE (DESKTOP PADRÃO)
   ============================================================ */
.lucas-contact-wrapper {
    position: relative;
    width: 100%;
    height: var(--desk-scroll-height); 
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0 !important; padding: 0 !important;
}

.contact-viewport {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh; 
    display: flex;
    overflow: hidden;
    padding-right: var(--desk-right-pad);
    box-sizing: border-box;
}

.contact-info-col {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: var(--desk-left-pad);
    padding-right: 40px;
}

.info-content-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.contact-images-col {
    width: 35%; 
    height: 100%;
    position: relative;
    display: flex; 
    align-items: center; 
}

/* Visibilidade das Galerias */
.desktop-gallery { display: block; width: 100%; height: 100%; position: relative; }
.mobile-gallery { display: none; } /* Escondido no Desktop */

/* Imagens */
.fade-img {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; z-index: 1;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-img.image-active { opacity: 1; z-index: 2; }

/* Tipografia */
.brand-block { margin-bottom: var(--desk-gap-1); }
.brand-logo { display: block; width: var(--desk-logo) !important; height: auto; }
.brand-tagline { font-family: 'Mulish', sans-serif; padding-left:10px ;font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 15px; opacity: 0.8; }

.contact-headline h2 { 
    font-family: 'Barlow Condensed', sans-serif; font-size: var(--desk-title); 
    letter-spacing: 2px; font-weight: 500; text-transform: uppercase; margin: 0 0 30px 0; 
}

.contact-data { display: flex; flex-direction: column; gap: 15px; margin-bottom: var(--desk-gap-2); }
.contact-link { font-family: 'Mulish', sans-serif; font-size: 18px; letter-spacing: 1px; color: #666; text-decoration: none; transition: color 0.3s; }
.contact-link:hover { color: var(--text-color); }

.btn-start-project { 
    font-family: 'Barlow Condensed', sans-serif; font-size: 16px; font-weight: 700; 
    letter-spacing: 2px; color: var(--text-color); text-decoration: none; 
    border-bottom: 2px solid transparent; text-transform: uppercase; display: inline-block; 
}
.btn-start-project:hover { border-bottom-color: var(--text-color); }


/* ============================================================
   NOTEBOOK (1025px - 1366px)
   ============================================================ */
@media (max-width: 1440px) and (min-width: 1025px) {
    .lucas-contact-wrapper { height: var(--note-scroll-height); }
    .contact-viewport { padding-right: var(--note-right-pad); }
    .contact-info-col { padding-left: var(--note-left-pad); }
    .brand-block { margin-bottom: var(--note-gap-1); }
    .contact-data { margin-bottom: var(--note-gap-2); gap: 10px; }
    .brand-logo { width: var(--note-logo) !important; }
    .contact-headline h2 { font-size: var(--note-title); margin-bottom: 20px; }
    .contact-link { font-size: var(--note-text); }
}


/* ============================================================
   TABLET E MOBILE (ATÉ 1024px)
   * AQUI ESTÁ A CORREÇÃO DE SOBREPOSIÇÃO *
   ============================================================ */
@media (max-width: 1024px) {
    
    /* 1. Resetando o Wrapper principal para fluxo normal */
    .lucas-contact-wrapper { 
        height: auto !important; 
        display: block; 
        overflow: visible !important;
    }
    
    /* 2. Resetando o Viewport (Matando o Sticky) */
    .contact-viewport {
        position: relative !important;
        top: auto !important;
        height: auto !important; /* Altura automática para crescer com o conteúdo */
        display: flex;
        flex-direction: column; /* EMPILHA: Imagem no topo, Texto em baixo */
        padding-right: 0;
        overflow: visible !important;
    }

    /* 3. COLUNA DE IMAGEM (O RETÂNGULO SUPERIOR) */
    .contact-images-col {
        width: 100%;
        position: relative;
        display: block;
        order: -1; /* Força visualmente para o topo */
        
        /* A MÁGICA: Definimos altura explícita aqui. 
           Isso força o texto a começar DEPOIS desse espaço. */
        height: var(--tab-gallery-height); 
    }
    
    /* Troca de Galerias */
    .desktop-gallery { display: none !important; }
    
    .mobile-gallery { 
        display: block; 
        width: 100%; 
        height: 100%; /* Ocupa 100% da altura da coluna definida acima */
        position: relative;
        background-color: #f4f4f4; /* Fundo de segurança enquanto carrega */
    }

    /* As imagens absolutas respeitam o container .mobile-gallery */
    .fade-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover; /* Garante preenchimento do retângulo */
    }

    /* 4. COLUNA DE TEXTO (PARTE INFERIOR) */
    .contact-info-col {
        width: 100%;
        height: auto !important;
        display: block;
        position: relative;
        z-index: 10; /* Garante que fique acima se houver bug */
        background-color: transparent; 
        
        /* Espaçamento interno */
        padding: 90px var(--tab-content-pad);
    }
    
    /* Centralização */
    .info-content-center {
        width: 100%;
        align-items: center; 
        text-align: center;
    }

    .brand-block { 
        align-items: center; 
        margin-bottom: 40px; 
        display: flex; flex-direction: column;
    }
    
    .brand-logo { width: var(--tab-logo) !important; }
    .contact-headline h2 { text-align: center; font-size: var(--tab-title); }
    .btn-start-project { margin-bottom: 40px; }
}


/* --- AJUSTES FINOS PARA MOBILE (< 768px) --- */
@media (max-width: 767px) {
    /* Ajusta a altura do retângulo da imagem para Mobile */
    .contact-images-col {
        height: var(--mob-gallery-height);
    }

    .contact-info-col { 
        padding-left: var(--mob-content-pad); 
        padding-right: var(--mob-content-pad); 
    }
    
    .brand-logo { width: var(--mob-logo) !important; }
    .contact-headline h2 { font-size: var(--mob-title); }
}/* End custom CSS */