/* MELHORIAS DE LAYOUT E SCROLL - MTDNA */

/* 1. CORREÇÃO DO PROBLEMA DE SCROLL */
/* FORÇA O SCROLL EM QUALQUER SITUAÇÃO - SOLUÇÃO DEFINITIVA */
body, html {
    overflow: auto !important;
    height: auto !important;
    scroll-behavior: smooth !important;
}

/* SOBRESCREVE COMPLETAMENTE O CSS DO PAGEPILING QUANDO NECESSÁRIO */
body.pp-scrollable, 
html.pp-scrollable,
body[style*="overflow: hidden"],
html[style*="overflow: hidden"] {
    overflow: auto !important;
    height: auto !important;
}

/* Remove qualquer bloqueio de scroll do pagepiling quando necessário */
body.pagepiling-scroll-fix {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Garante que o scroll funcione mesmo com pagepiling ativo */
.pp-scrollable {
    overflow-y: auto !important;
    height: 100vh !important;
}

/* SOLUÇÃO DEFINITIVA - USA !important PARA SOBRESCREVER TUDO */
.scroll-force-enabled {
    overflow: auto !important;
    height: auto !important;
    max-height: none !important;
}

.scroll-force-enabled body,
.scroll-force-enabled html {
    overflow: auto !important;
    height: auto !important;
}

/* Permite scroll quando o pagepiling não está ativo */
@media (max-width: 1200px), (max-height: 800px) {
    body, html {
        overflow: auto !important;
        height: auto !important;
    }
    
    .ppslide {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
    }
    
    #pagepiling {
        height: auto !important;
    }
    
    .section {
        position: relative !important;
        height: auto !important;
        min-height: 100vh;
    }
}



/* CORREÇÃO ADICIONAL PARA TELAS GRANDES */
@media (min-width: 1201px) and (min-height: 801px) {
    /* Permite scroll mesmo em telas grandes se necessário */
    body.force-scroll {
        overflow: auto !important;
    }
    
    /* Fallback para quando pagepiling falha */
    body:not(.pagepiling-initialized) {
        overflow: auto !important;
    }
    
    body:not(.pagepiling-initialized) .ppslide {
        position: relative !important;
        height: auto !important;
        min-height: 100vh !important;
    }
    
    /* CORREÇÃO ESPECÍFICA PARA PAGEPILING BUGADO */
    .pp-easing {
        overflow: visible !important;
    }
    
    #pagepiling.pp-easing {
        overflow: visible !important;
        height: auto !important;
    }
}

/* CORREÇÃO SUTIL - APENAS PREVINE VAZAMENTO DURANTE CARREGAMENTO */
#identity {
    position: relative;
    /* Apenas garante que tenha fundo durante carregamento */
    background-color: #1a1a1a;
}

#identity .container {
    position: relative;
    z-index: 2;
}

/* CORREÇÃO SEÇÃO CLIENTES - MOBILE MELHORADO */
@media (max-width: 768px) {
    /* Seção de clientes - produtos maiores e sem fundo branco */
    #Clients {
        background: transparent !important;
        backdrop-filter: none !important;
    }
    
    #Clients .container {
        background: transparent !important;
    }
    
    #Clients img {
        max-width: 100% !important;
        height: auto !important;
        min-height: 100px !important;
        max-height: 150px !important;
        object-fit: contain !important;
        padding: 15px !important;
    }
    
    /* Título da seção de clientes */
    #Clients .oi_icon_titile {
        font-size: 24px !important;
        margin-bottom: 30px !important;
        text-align: center !important;
    }
    
    /* Container da imagem de clientes */
    #Clients .col-sm-12 > div {
        background: rgba(255, 255, 255, 0.1) !important;
        border-radius: 15px !important;
        padding: 20px !important;
        margin: 10px 0 !important;
    }
}

/* 2. MELHORIAS DE RESPONSIVIDADE */
@media (max-width: 768px) {
    /* Mostra o menu hambúrguer em mobile */
    .hamburger_holder span {
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Ajusta posicionamento dos elementos fixos */
    .header {
        top: 10px !important;
        left: 10px !important;
    }
    
    .page_title {
        left: 20px !important;
        top: auto !important;
        bottom: 20px !important;
        transform: none !important;
    }
    
    .page_title p {
        transform: none !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
    
    .page_title p:before,
    .page_title p:after {
        display: none !important;
    }
    
    .section_number {
        display: none !important;
    }
    
    .footer {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        text-align: center;
        padding: 20px;
    }
    
    /* Melhorias no texto principal */
    .main-6-1 .oi_vc_text_span p {
        font-size: 24px !important;
        line-height: 28px !important;
        padding: 20px !important;
    }
    
    /* Ajustes nos serviços */
    .item-service {
        height: 250px !important;
        margin-bottom: 20px !important;
    }
    
    .item-service .item-serv-title {
        font-size: 20px !important;
        line-height: 24px !important;
    }
    
    /* Melhorias nas navegações */
    #serviceSlide .owl-nav .owl-next,
    #serviceSlide .owl-nav .owl-prev {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 10px 5px !important;
        display: inline-block !important;
    }
    
    #testimonialSlide .owl-nav .owl-next,
    #testimonialSlide .owl-nav .owl-prev {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        margin: 10px 5px !important;
        display: inline-block !important;
    }
}

/* 3. MELHORIAS NO LAYOUT GERAL */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Ajuste na imagem de fundo principal */
#identity {
    position: relative;
    overflow: hidden;
}

#identity .container {
    position: relative;
    z-index: 2;
}

/* Melhorias no carousel de serviços */
#serviceSlide {
    margin-bottom: 30px;
}

#serviceSlide .owl-stage-outer {
    padding: 20px 0;
}

/* Melhorias no carousel de testimoniais */
#testimonialSlide .management_image {
    max-width: 150px;
    height: auto;
    border-radius: 50%;
    margin: 0 auto 20px;
}

/* 4. NAVEGAÇÃO MELHORADA */
#pp-nav {
    z-index: 1000 !important;
}

@media (min-width: 1201px) and (min-height: 801px) {
    /* Mantém o comportamento original em telas grandes */
    .hamburger_holder span {
        display: block;
    }
}

/* 5. MODAL MELHORIAS */
.modal-dialog {
    margin: 30px auto;
}

.modal-content {
    margin-top: 0 !important;
}

@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
}

/* 6. FORMULÁRIO DE CONTATO */
.contact-info {
    margin-bottom: 30px;
}

.contact-info li {
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .main-7 .col-md-6 {
        margin-bottom: 30px;
    }
    
    .main-7 .col-md-6:last-child {
        background-color: transparent !important;
        padding: 20px !important;
    }
}

/* 7. MELHORIAS DE ACESSIBILIDADE */
.oi_vc_button,
.btn {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 8. SCROLL SUAVE */
html {
    scroll-behavior: smooth;
}

/* 9. LOADING PERFORMANCE */
.ppslide {
    will-change: transform;
}

/* ========= USER REQUESTED ADJUSTMENTS ========= */
/* 1) Remove decorative/icons in Services area (minimal, non-destructive) */
/* Targets possible icon wrappers and pseudo-elements without changing HTML */
.item-service .oi_heading_icon,
.item-service .oi_heading_icon_center,
.main-1-3 .oi_heading_icon,
.main-1-3 .oi_heading_icon_center,
#services .oi_heading_icon,
#services .oi_heading_icon_center,
.item-service::before,
.item-service::after {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background: none !important;
    width: auto !important;
    height: auto !important;
}

/* 2) COMPLETELY hide section numbers on ALL screen sizes - override JS control */
.section_number,
h6.section_number,
body .section_number,
html .section_number {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    z-index: -9999 !important;
}

@media (max-width: 768px) {
    .page_title {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* 3) Fix contact section display issues */
#contacts.main-7,
.main-7 {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow: visible !important;
}

#contacts .container,
.main-7 .container {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#contacts .vc_column-inner,
.main-7 .vc_column-inner {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Ensure contact details are fully visible */
.contact-info {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.contact-info li {
    overflow: visible !important;
    height: auto !important;
}

/* 4) COMPLETE Mobile contact section restructure */
@media (max-width: 768px) {
    /* Force contact section to display properly */
    #contacts,
    #contacts.main-7,
    .main-7 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 100vh !important;
        max-height: none !important;
        padding: 20px 0 !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 10 !important;
        background: #f8f8f8 !important;
    }
    
    #contacts .container,
    .main-7 .container {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        width: 100% !important;
        padding: 15px !important;
        overflow: visible !important;
        max-width: none !important;
    }
    
    #contacts .vc_column-inner,
    .main-7 .vc_column-inner {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    #contacts .row,
    .main-7 .row {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
        width: 100% !important;
    }
    
    /* FORM SECTION - Display first */
    #contacts .col-md-6:first-child,
    .main-7 .col-md-6:first-child {
        display: flex !important;
        flex-direction: column !important;
        order: 1 !important;
        width: 100% !important;
        height: auto !important;
        margin-bottom: 30px !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        overflow: visible !important;
    }
    
    /* CONTACT DETAILS SECTION - Display second */
    #contacts .col-md-6:last-child,
    .main-7 .col-md-6:last-child {
        display: flex !important;
        flex-direction: column !important;
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        padding: 20px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        border-radius: 15px !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
        overflow: visible !important;
        margin-top: 0 !important;
    }
    
    /* Form container styling */
    #contacts .vc_column-inner,
    .main-7 .vc_column-inner {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Form title styling */
    #contacts h1,
    .main-7 h1 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
        color: #333 !important;
        text-align: center !important;
    }
    
    /* Form subtitle */
    #contacts .oi_icon_sub_titile,
    .main-7 .oi_icon_sub_titile {
        font-size: 14px !important;
        color: #666 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    /* Form styling */
    #contacts .wpcf7,
    .main-7 .wpcf7 {
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        height: auto !important;
        width: 100% !important;
    }
    
    #contacts form,
    .main-7 form {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        height: auto !important;
    }
    
    #contacts .row.text-left,
    .main-7 .row.text-left {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    #contacts .col-md-12,
    .main-7 .col-md-12 {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        margin-bottom: 15px !important;
    }
    
    /* Input styling for mobile */
    #contacts input,
    #contacts textarea,
    .main-7 input,
    .main-7 textarea {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding: 15px !important;
        font-size: 16px !important;
        border: 2px solid #ddd !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
        box-sizing: border-box !important;
        background: #fff !important;
    }
    
    #contacts textarea,
    .main-7 textarea {
        min-height: 120px !important;
        resize: vertical !important;
    }
    
    /* Button styling */
    #contacts #envia,
    .main-7 #envia {
        width: 100% !important;
        padding: 15px !important;
        font-size: 16px !important;
        font-weight: bold !important;
        border: none !important;
        border-radius: 8px !important;
        background: #f4c70b !important;
        color: #333 !important;
        cursor: pointer !important;
        margin-top: 10px !important;
    }
    
    /* Contact details section title */
    #contacts h4,
    .main-7 h4 {
        font-size: 20px !important;
        color: #333 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }
    
    /* Contact info list styling */
    .contact-info {
        display: flex !important;
        flex-direction: column !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    .contact-info li {
        display: flex !important;
        flex-direction: column !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        background: rgba(244, 199, 11, 0.1) !important;
        border-radius: 8px !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .contact-info strong {
        display: block !important;
        color: #333 !important;
        font-size: 14px !important;
        font-weight: bold !important;
        margin-bottom: 8px !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
    }
    
    .contact-info p {
        display: block !important;
        color: #666 !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
        margin: 0 !important;
        overflow: visible !important;
        height: auto !important;
    }
    
    .contact-info a {
        color: #f4c70b !important;
        text-decoration: none !important;
    }
    
    .contact-info a:hover {
        text-decoration: underline !important;
    }
    
    /* Force visibility overrides */
    #contacts *,
    .main-7 * {
        max-height: none !important;
        overflow: visible !important;
    }
    
    /* Remove any transforms that might hide content */
    #contacts,
    #contacts *,
    .main-7,
    .main-7 * {
        transform: none !important;
        clip: none !important;
        clip-path: none !important;
    }
}

/* End user adjustments */

/* MELHORIA DA IMAGEM DE FUNDO - APARECE IMEDIATAMENTE */
#identity {
    /* Fallback sólido enquanto imagem não carrega */
    background-color: #1a1a1a;
    /* Pré-aplica a primeira imagem para evitar delay */
    background-image: url('../img/bg_rio.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /* Garante transição suave */
    transition: background-image 3s ease-in-out;
}

/* Durante carregamento, mantém visibilidade da imagem */
body.loading #identity {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Após carregar, continua mostrando normalmente - background controlado pelo JavaScript */

/* Garante que seções tenham z-index apropriado */
.ppslide {
    position: relative;
    z-index: 1;
    contain: layout style;
}

/* CORREÇÃO DE SOBREPOSIÇÃO: Home e Services */
#identity {
    z-index: 1;
    position: relative;
}

/* Seção de serviços um pouco acima para evitar sobreposição */
#services {
    z-index: 2;
    position: relative;
    transform: translateZ(0); /* Força nova camada de composição */
}

/* PRELOADER: overlay full-screen para esconder conteúdo até imagens carregarem */
/* Força exibição sobrescrevendo outros CSS */
body .preload {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: #0a0a0a !important; /* tom escuro neutro para evitar flash */
    z-index: 99998 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 300ms ease, visibility 300ms ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body .preload.page_loaded {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.preload .preloader-inner {
    text-align: center;
    color: #fff;
}

.preload .preloader-logo {
    max-width: 200px;
    height: auto;
    margin-bottom: 30px;
    opacity: 0.9;
    animation: logoFade 2s ease-in-out infinite alternate;
}

@keyframes logoFade {
    0% { opacity: 0.7; }
    100% { opacity: 1; }
}

.preload .spinner {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,0.12);
    border-top-color: #f4c70b; /* cor de destaque */
    animation: preload-spin 1s linear infinite;
    margin: 0 auto 20px;
}

@keyframes preload-spin {
    to { transform: rotate(360deg); }
}

.preload .preload-text {
    font-size: 13px;
    opacity: 0.9;
    margin-top: 10px;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Responsividade do preloader */
@media (max-width: 768px) {
    .preload .preloader-logo {
        max-width: 150px;
        margin-bottom: 20px;
    }
    
    .preload .spinner {
        width: 44px;
        height: 44px;
        margin: 0 auto 15px;
    }
    
    .preload .preload-text {
        font-size: 12px;
    }
}

/* 10. CORREÇÃO DE BUGS VISUAIS */
.overlay {
    pointer-events: none;
}

.go_overlay .overlay {
    pointer-events: all;
}

/* Evita problemas de z-index */
.menu_holder {
    z-index: 9999 !important;
}

.hamburger_holder {
    z-index: 10000 !important;
}

/* 11. MELHORIAS NO LOGO */
.logo_holder img {
    max-height: 50px;
    width: auto;
}

@media (max-width: 768px) {
    .logo_holder img {
        max-height: 40px;
    }
}

/* 12. CORREÇÕES ESPECÍFICAS PARA MOBILE */
@media (max-width: 480px) {
    .main-6-1 .oi_vc_text_span p {
        font-size: 18px !important;
        line-height: 22px !important;
        padding: 15px !important;
        text-align: left !important;
    }
    
    .container {
        padding: 0 10px;
    }
    
    .item-service {
        height: 200px !important;
    }
    
    .item-service .item-serv-title {
        font-size: 18px !important;
        line-height: 22px !important;
    }
}

/* 13. MODO DARK/LIGHT MELHORADO */
.light_bg {
    color: #333;
}

.dark_bg {
    color: #fff;
}

/* 14. TRANSIÇÕES SUAVES */
.ppslide,
.header,
.page_title,
.section_number,
.footer {
    transition: all 0.3s ease-in-out;
}

/* 15. CORREÇÃO FINAL DO SCROLL EM DISPOSITIVOS PEQUENOS */
@media (max-width: 1200px) {
    body.raw_scroller {
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    
    .ppslide {
        position: static !important;
        transform: none !important;
    }
}

/* 16. MELHORIAS FINAIS DE USABILIDADE */
/* Garante que links e botões sejam facilmente clicáveis */
a, button, .oi_vc_button, .item-service a {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* BOTÃO DE EMERGÊNCIA PARA SCROLL */
.scroll-emergency-btn {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 99999;
    background: #ff4444;
    color: white;
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    display: none;
}

.scroll-emergency-btn:hover {
    background: #ff6666;
}

.scroll-emergency-btn.show {
    display: block;
}

/* Melhora a visibilidade do foco para navegação por teclado */
a:focus, button:focus, input:focus, textarea:focus {
    outline: 2px solid #f4c70b;
    outline-offset: 2px;
}

/* Garante que o conteúdo seja sempre visível */
.ppslide .container {
    position: relative;
    z-index: 10;
}

/* Corrige problemas de sobreposição em mobile */
@media (max-width: 768px) {


    .header, .hamburger_holder, .page_title, .section_number {
        z-index: 1000;
    }

    .hamburger_holder {
        position: fixed;
    }

    .menu_holder {
        z-index: 1001;
    }
    
    .overlay {
        z-index: 999;
    }
}

/* Melhoria na performance do scroll */
* {
    box-sizing: border-box;
}

/* Previne problemas de layout shift */
img, video {
    max-width: 100%;
    height: auto;
}

/* Garante que o footer seja sempre acessível */
.footer {
    pointer-events: auto;
}

/* Melhoria para impressão */
@media print {
    .header, .hamburger_holder, .page_title, .section_number, .overlay, .menu_holder, .scroll-emergency-btn {
        display: none !important;
    }
    
    body, html {
        overflow: visible !important;
    }
    
    .ppslide {
        page-break-inside: avoid;
        position: static !important;
    }
}