/* OVERRIDE ULTRA AGRESSIVO PARA MOBILE - MTDNA */

/* ================================================
   FORÇA SEÇÃO DE CONTATO A CABER EM QUALQUER MOBILE
   ================================================ */

@media (max-width: 768px) {
    /* ================================================
       LOGO MAIOR PARA MOBILE
       ================================================ */
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 80px !important;
        max-width: 300px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .logo_holder {
        text-align: center !important;
        padding: 10px 0 !important;
        margin: 0 auto !important;
    }
    
    .header .logo_holder {
        flex-grow: 1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* SOBRESCREVE TUDO - FORÇA COMPACTAÇÃO MÁXIMA */
    #contacts,
    #contacts.ppslide,
    #contacts.main-7,
    #contacts.light_bg,
    #contacts.full-height,
    #contacts.align-items-center,
    #contacts.d-flex {
        height: 100vh !important;
        max-height: 100vh !important;
        min-height: auto !important;
        padding: 2px 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        display: block !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
    }
    
    /* REMOVE TODOS OS BACKGROUNDS E ESPAÇAMENTOS */
    #contacts .container,
    #contacts .vc_column-inner,
    #contacts .row,
    #contacts .col-md-6,
    #contacts .oi_vc_text,
    #contacts .oi_vc_text_span,
    #contacts .oi_custom_heading_holder,
    #contacts .item_height_x2,
    #contacts .main-7-1 {
        padding: 0 !important;
        margin: 0 !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        background: transparent !important;
    }
    
    /* CONTAINER PRINCIPAL - MÁXIMO 95% DA VIEWPORT */
    #contacts .container {
        max-height: 95vh !important;
        overflow-y: auto !important;
        padding: 0 5px !important;
    }
    
    /* TÍTULO SUPER COMPACTO */
    #contacts .oi_icon_titile,
    #contacts h1.oi_icon_titile {
        font-size: 18px !important;
        line-height: 1 !important;
        margin: 2px 0 3px 0 !important;
        padding: 0 !important;
    }
    
    /* SUBTÍTULO MÍNIMO */
    #contacts .oi_icon_sub_titile,
    #contacts p.oi_icon_sub_titile {
        font-size: 11px !important;
        line-height: 1.1 !important;
        margin: 0 0 5px 0 !important;
        padding: 0 3px !important;
    }
    
    /* BORDA DECORATIVA MÍNIMA */
    #contacts .oi_heading_border {
        margin: 1px auto 3px !important;
        width: 40px !important;
        height: 1px !important;
    }
    
    #contacts .oi_heading_border span {
        height: 1px !important;
    }
    
    /* FORMULÁRIO MAIS ESPAÇADO */
    #contacts .wpcf7,
    #contacts form {
        margin: 10px 0 !important;
        padding: 5px !important;
    }
    
    /* LINHAS DO FORMULÁRIO */
    #contacts .row.text-left {
        margin: 0 !important;
    }
    
    #contacts .row.text-left .col-md-12 {
        padding: 0 5px !important;
        margin-bottom: 8px !important;
    }
    
    #contacts .row.text-left .col-md-12:last-child {
        margin-bottom: 5px !important;
    }
    
    /* CAMPOS DE INPUT MAIS CONFORTÁVEIS */
    #contacts input[type="text"],
    #contacts input[type="email"],
    #contacts input.form-name,
    #contacts input.form-email,
    #contacts input.form-subject {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        height: 45px !important;
        box-sizing: border-box !important;
    }
    
    /* TEXTAREA MAIS CONFORTÁVEL */
    #contacts textarea,
    #contacts textarea.form-message {
        padding: 12px 12px !important;
        margin-bottom: 8px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        min-height: 80px !important;
        height: 80px !important;
        resize: vertical !important;
        box-sizing: border-box !important;
    }
    
    /* BOTÃO DE ENVIO MAIS CONFORTÁVEL */
    #contacts .btn,
    #contacts .btn-secondary,
    #contacts input.btn,
    #contacts input#envia {
        padding: 12px 20px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 10px 0 !important;
        height: 50px !important;
        border-radius: 6px !important;
        min-width: 120px !important;
    }
    
    /* BOTÃO CONTACT DETAILS MÍNIMO */
    .mobile-contact-details-btn {
        padding: 4px 8px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        margin: 3px 0 2px 0 !important;
        height: 26px !important;
    }
    
    .mobile-contact-details-btn i {
        margin-right: 4px !important;
        font-size: 10px !important;
    }
    
    /* PARÁGRAFO DO BOTÃO */
    #contacts .text-center,
    #contacts .text-center.mb-0,
    #contacts p.text-center {
        margin: 2px 0 0 0 !important;
        padding: 0 !important;
    }
    
    /* REMOVE QUEBRAS DE LINHA */
    #contacts br {
        display: none !important;
    }
    
    /* FORÇA ESCONDER QUALQUER OVERFLOW */
    #contacts .col-md-6:last-child {
        display: none !important;
    }
    
    /* SOBRESCREVE QUALQUER ALTURA FIXA */
    #contacts * {
        max-height: none !important;
    }
    
    /* GARANTE QUE TUDO CAIBA NA TELA */
    @media (max-height: 600px) {
        #contacts .oi_icon_titile {
            font-size: 16px !important;
        }
        
        #contacts .oi_icon_sub_titile {
            font-size: 10px !important;
        }
        
        #contacts input,
        #contacts textarea {
            padding: 4px 5px !important;
            font-size: 13px !important;
        }
        
        #contacts textarea {
            min-height: 35px !important;
            height: 35px !important;
        }
        
        #contacts .btn {
            padding: 5px 10px !important;
            font-size: 11px !important;
            height: 26px !important;
        }
        
        .mobile-contact-details-btn {
            padding: 3px 6px !important;
            font-size: 9px !important;
            height: 22px !important;
        }
    }
    
    /* PARA TELAS MUITO PEQUENAS */
    @media (max-height: 500px) {
        #contacts {
            padding: 5px 0 !important;
        }
        
        #contacts .container {
            padding: 0 8px !important;
        }
        
        #contacts .oi_icon_titile {
            font-size: 14px !important;
            margin: 1px 0 2px 0 !important;
        }
        
        #contacts .oi_icon_sub_titile {
            font-size: 9px !important;
            margin: 0 0 3px 0 !important;
        }
        
        #contacts .oi_heading_border {
            margin: 1px auto 2px !important;
            width: 30px !important;
        }
        
        #contacts input,
        #contacts textarea {
            padding: 8px 10px !important;
            font-size: 14px !important;
            margin-bottom: 6px !important;
        }
        
        #contacts input {
            height: 40px !important;
        }
        
        #contacts textarea {
            min-height: 60px !important;
            height: 60px !important;
        }
        
        #contacts .btn {
            padding: 10px 15px !important;
            font-size: 14px !important;
            height: 40px !important;
        }
        
        .mobile-contact-details-btn {
            padding: 2px 5px !important;
            font-size: 8px !important;
            height: 20px !important;
            margin: 2px 0 1px 0 !important;
        }
    }
}

/* ================================================
   LOGO RESPONSIVO PARA DIFERENTES TAMANHOS MOBILE
   ================================================ */

/* Tablets e dispositivos médios */
@media (max-width: 992px) and (min-width: 769px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 70px !important;
        max-width: 280px !important;
    }
}

/* Smartphones grandes */
@media (max-width: 480px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 90px !important;
        max-width: 320px !important;
    }
}

/* Smartphones pequenos */
@media (max-width: 360px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 85px !important;
        max-width: 280px !important;
    }
}

/* Smartphones muito pequenos */
@media (max-width: 320px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 75px !important;
        max-width: 250px !important;
    }
}

/* ================================================
   REMOVE BOTÕES DO CARROSSEL EM MOBILE
   ================================================ */

@media (max-width: 768px) {
    /* REMOVE COMPLETAMENTE NAVEGAÇÃO OWL CAROUSEL */
    .owl-carousel .owl-nav,
    .owl-carousel .owl-nav .owl-prev,
    .owl-carousel .owl-nav .owl-next,
    .owl-nav,
    .owl-nav .owl-prev,
    .owl-nav .owl-next,
    .owl-prev,
    .owl-next,
    #serviceSlide .owl-nav,
    #serviceSlide .owl-nav .owl-prev,
    #serviceSlide .owl-nav .owl-next,
    #testimonialSlide .owl-nav,
    #testimonialSlide .owl-nav .owl-prev,
    #testimonialSlide .owl-nav .owl-next,
    
    /* REMOVE DOTS/PONTOS DE NAVEGAÇÃO */
    .owl-carousel .owl-dots,
    .owl-carousel .owl-dot,
    .owl-dots,
    .owl-dot,
    #serviceSlide .owl-dots,
    #serviceSlide .owl-dot,
    #testimonialSlide .owl-dots,
    #testimonialSlide .owl-dot,
    
    /* REMOVE OUTROS CONTROLES DO CARROSSEL */
    .carousel-control,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-control-prev-icon,
    .carousel-control-next-icon,
    .carousel-indicators,
    .carousel-indicators li,
    .slide-nav,
    .slide-controls,
    .slider-nav,
    .prev-slide,
    .next-slide,
    .slide-indicators,
    
    /* REMOVE SETAS GENÉRICAS */
    .arrow-left,
    .arrow-right,
    .prev-arrow,
    .next-arrow,
    .control-arrow,
    .nav-arrow {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        left: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* MANTÉM FUNCIONALIDADE DE SWIPE/TOUCH - APENAS REMOVE BOTÕES */
    .owl-carousel .owl-stage-outer {
        overflow: hidden !important;
        position: relative !important;
    }
    
    .owl-carousel .owl-stage {
        position: relative !important;
        -ms-touch-action: pan-y !important;
        touch-action: pan-y !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    .owl-carousel .owl-item {
        position: relative !important;
        min-height: 1px !important;
        float: left !important;
        -webkit-backface-visibility: hidden !important;
        backface-visibility: hidden !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    
    /* HABILITA SWIPE SUAVE EM MOBILE */
    .owl-carousel {
        -webkit-tap-highlight-color: transparent !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .owl-carousel .owl-wrapper-outer {
        overflow: hidden !important;
        position: relative !important;
        width: 100% !important;
    }
    
    /* MANTÉM TRANSIÇÕES SUAVES PARA SWIPE */
    .owl-carousel .owl-stage {
        transition: all 0.25s ease-out !important;
        -webkit-transition: all 0.25s ease-out !important;
    }
    
    .owl-carousel.owl-drag .owl-stage {
        transition: none !important;
        -webkit-transition: none !important;
    }
}

/* ================================================
   LOGO MAIOR PARA DESKTOP E TODAS AS RESOLUÇÕES
   ================================================ */

/* Desktop padrão */
@media (min-width: 993px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 120px !important;
        max-width: 400px !important;
        width: auto !important;
        height: auto !important;
    }
    
    .logo_holder {
        padding: 15px 0 !important;
        margin: 0 auto !important;
    }
    
    .header .logo_holder {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* Desktop grande */
@media (min-width: 1200px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 140px !important;
        max-width: 500px !important;
    }
    
    .logo_holder {
        padding: 20px 0 !important;
    }
}

/* Desktop extra grande */
@media (min-width: 1400px) {
    .logo_holder img,
    .logo_for_dark_bg,
    .logo_for_light_bg {
        max-height: 160px !important;
        max-width: 600px !important;
    }
    
    .logo_holder {
        padding: 25px 0 !important;
    }
}

/* SOBRESCREVE REGRAS ANTERIORES COM !IMPORTANT */
.logo_holder img,
.logo_for_dark_bg,
.logo_for_light_bg {
    object-fit: contain !important;
    object-position: center !important;
}

/* REGRA GLOBAL - SOBRESCREVE LAYOUT-FIXES.CSS */
.logo_holder img {
    max-height: 120px !important;
    min-height: 60px !important;
    width: auto !important;
    height: auto !important;
}

/* FORÇA CENTRALIZAÇÃO EM TODAS AS RESOLUÇÕES */
.header .logo_holder {
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
}

/* ================================================
   CARROSSEL OPERATIONAL TEAM MOBILE OTIMIZADO
   ================================================ */

@media (max-width: 768px) {
    /* DOTS DO CARROSSEL VISÍVEIS E BONITOS EM MOBILE */
    #testimonialSlide .owl-dots {
        display: block !important;
        text-align: center !important;
        margin-top: 20px !important;
        padding: 10px 0 !important;
    }
    
    #testimonialSlide .owl-dot {
        display: inline-block !important;
        width: 12px !important;
        height: 12px !important;
        border-radius: 50% !important;
        background-color: rgba(255, 255, 255, 0.3) !important;
        margin: 0 8px !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
    }
    
    #testimonialSlide .owl-dot.active,
    #testimonialSlide .owl-dot:hover {
        background-color: #fff !important;
        transform: scale(1.2) !important;
    }
    
    /* REMOVE NAVEGAÇÃO DE BOTÕES EM MOBILE */
    #testimonialSlide .owl-nav {
        display: none !important;
    }
    
    /* OTIMIZA ÁREA TOUCH DO CARROSSEL */
    #testimonialSlide {
        touch-action: pan-y pinch-zoom !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        user-select: none !important;
    }
    
    #testimonialSlide .owl-stage-outer {
        cursor: grab !important;
    }
    
    #testimonialSlide .owl-stage-outer:active {
        cursor: grabbing !important;
    }
}

/* ================================================
   DESKTOP - ESCONDE BOTÃO MOBILE CONTACT DETAILS
   ================================================ */

@media (min-width: 769px) {
    /* FORÇA BOTÃO DE CONTACT DETAILS A DESAPARECER COMPLETAMENTE EM DESKTOP */
    .mobile-contact-details-btn {
        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: -1 !important;
    }
    
    /* TAMBÉM REMOVE O MODAL EM DESKTOP */
    .mobile-contact-modal {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: fixed !important;
        left: -9999px !important;
        top: -9999px !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        z-index: -1 !important;
    }
}

/* REGRA GLOBAL ULTRA ESPECÍFICA PARA DESKTOP/TABLET */
@media screen and (min-width: 769px) {
    button.mobile-contact-details-btn,
    .btn.mobile-contact-details-btn,
    a.mobile-contact-details-btn,
    span.mobile-contact-details-btn,
    div.mobile-contact-details-btn,
    #contacts .mobile-contact-details-btn,
    .container .mobile-contact-details-btn,
    body .mobile-contact-details-btn,
    html .mobile-contact-details-btn {
        display: none !important;
        visibility: hidden !important;
    }
}

/* FORÇA MÁXIMA - SOBRESCREVE QUALQUER OUTRA REGRA */
@media (min-width: 769px) and (max-width: 9999px) {
    .mobile-contact-details-btn,
    button[onclick*="showMobileContactModal"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        position: absolute !important;
        left: -10000px !important;
        top: -10000px !important;
        overflow: hidden !important;
        pointer-events: none !important;
        z-index: -9999 !important;
    }
}

/* ================================================
   NORMALIZAÇÃO GLOBAL DE TÍTULOS - TODAS AS RESOLUÇÕES
   ================================================ */

/* TÍTULOS H1 - PRINCIPAIS */
h1,
h1.oi_icon_titile,
.oi_icon_titile {
    font-size: 28px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin: 15px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    letter-spacing: 0.5px !important;
}

/* TÍTULOS H2 - SECUNDÁRIOS */
h2,
h2.item-serv-title,
.item-serv-title {
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
}

/* TÍTULOS H3 - TERCÁRIOS */
h3,
h3.oi_tesimonial_content {
    font-size: 18px !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    letter-spacing: 0.2px !important;
}

/* TÍTULOS H4 E H5 - MENORES */
h4,
h5,
h5.oi_tesimonial_title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    margin: 8px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    letter-spacing: 0.2px !important;
}

/* ================================================
   CORES POR FUNDO - FUNDO ESCURO (dark_bg)
   ================================================ */

/* SEÇÕES COM FUNDO ESCURO */
#identity.dark_bg h1,
#identity.dark_bg h2,
#identity.dark_bg h3,
#identity.dark_bg h4,
#identity.dark_bg h5,
#management.dark_bg h1,
#management.dark_bg h2,
#management.dark_bg h3,
#management.dark_bg h4,
#management.dark_bg h5,
.dark_bg h1,
.dark_bg h2,
.dark_bg h3,
.dark_bg h4,
.dark_bg h5,
.dark_bg .oi_icon_titile,
.dark_bg .item-serv-title,
.dark_bg .oi_tesimonial_content,
.dark_bg .oi_tesimonial_title {
    color: #ffffff !important;
}

/* ================================================
   CORES POR FUNDO - FUNDO CLARO (light_bg)
   ================================================ */

/* SEÇÕES COM FUNDO CLARO */
#services.light_bg h1,
#services.light_bg h2,
#services.light_bg h3,
#services.light_bg h4,
#services.light_bg h5,
#clients.light_bg h1,
#clients.light_bg h2,
#clients.light_bg h3,
#clients.light_bg h4,
#clients.light_bg h5,
#contacts.light_bg h1,
#contacts.light_bg h2,
#contacts.light_bg h3,
#contacts.light_bg h4,
#contacts.light_bg h5,
.light_bg h1,
.light_bg h2,
.light_bg h3,
.light_bg h4,
.light_bg h5,
.light_bg .oi_icon_titile,
.light_bg .item-serv-title,
.light_bg .oi_tesimonial_content,
.light_bg .oi_tesimonial_title {
    color: #333333 !important;
}

/* ================================================
   TÍTULOS RESPONSIVOS - DESKTOP (≥993px)
   ================================================ */

@media (min-width: 993px) {
    h1,
    h1.oi_icon_titile,
    .oi_icon_titile {
        font-size: 36px !important;
        margin: 20px 0 !important;
    }
    
    h2,
    h2.item-serv-title,
    .item-serv-title {
        font-size: 28px !important;
        margin: 16px 0 !important;
    }
    
    h3,
    h3.oi_tesimonial_content {
        font-size: 22px !important;
        margin: 14px 0 !important;
    }
    
    h4,
    h5,
    h5.oi_tesimonial_title {
        font-size: 20px !important;
        margin: 12px 0 !important;
    }
}

/* ================================================
   TÍTULOS RESPONSIVOS - TABLET (769px-992px)
   ================================================ */

@media (min-width: 769px) and (max-width: 992px) {
    h1,
    h1.oi_icon_titile,
    .oi_icon_titile {
        font-size: 32px !important;
        margin: 18px 0 !important;
    }
    
    h2,
    h2.item-serv-title,
    .item-serv-title {
        font-size: 26px !important;
        margin: 15px 0 !important;
    }
    
    h3,
    h3.oi_tesimonial_content {
        font-size: 20px !important;
        margin: 12px 0 !important;
    }
    
    h4,
    h5,
    h5.oi_tesimonial_title {
        font-size: 18px !important;
        margin: 10px 0 !important;
    }
}

/* ================================================
   TÍTULOS RESPONSIVOS - MOBILE (≤768px)
   ================================================ */

@media (max-width: 768px) {
    h1,
    h1.oi_icon_titile,
    .oi_icon_titile {
        font-size: 28px !important;
        margin: 15px 0 !important;
    }
    
    h2,
    h2.item-serv-title,
    .item-serv-title {
        font-size: 22px !important;
        margin: 12px 0 !important;
    }
    
    h3,
    h3.oi_tesimonial_content {
        font-size: 18px !important;
        margin: 10px 0 !important;
    }
    
    h4,
    h5,
    h5.oi_tesimonial_title {
        font-size: 16px !important;
        margin: 8px 0 !important;
    }
}

/* ================================================
   TÍTULOS RESPONSIVOS - MOBILE PEQUENO (≤480px)
   ================================================ */

@media (max-width: 480px) {
    h1,
    h1.oi_icon_titile,
    .oi_icon_titile {
        font-size: 24px !important;
        margin: 12px 0 !important;
    }
    
    h2,
    h2.item-serv-title,
    .item-serv-title {
        font-size: 20px !important;
        margin: 10px 0 !important;
    }
    
    h3,
    h3.oi_tesimonial_content {
        font-size: 16px !important;
        margin: 8px 0 !important;
    }
    
    h4,
    h5,
    h5.oi_tesimonial_title {
        font-size: 14px !important;
        margin: 6px 0 !important;
    }
}

/* ================================================
   TÍTULOS RESPONSIVOS - MOBILE MUITO PEQUENO (≤320px)
   ================================================ */

@media (max-width: 320px) {
    h1,
    h1.oi_icon_titile,
    .oi_icon_titile {
        font-size: 22px !important;
        margin: 10px 0 !important;
    }
    
    h2,
    h2.item-serv-title,
    .item-serv-title {
        font-size: 18px !important;
        margin: 8px 0 !important;
    }
    
    h3,
    h3.oi_tesimonial_content {
        font-size: 15px !important;
        margin: 6px 0 !important;
    }
    
    h4,
    h5,
    h5.oi_tesimonial_title {
        font-size: 13px !important;
        margin: 5px 0 !important;
    }
}

/* ================================================
   FORÇA SOBRESCRITA DE CLASSES ESPECÍFICAS
   ================================================ */

/* ================================================
   CLASSE .oi_icon_titile - ADAPTATIVA POR FUNDO
   ================================================ */

/* Regra base para oi_icon_titile */
.oi_icon_titile {
    color: #333333 !important; /* Padrão preto */
}

/* oi_icon_titile em fundos escuros */
.dark_bg .oi_icon_titile,
#identity .oi_icon_titile,
#management .oi_icon_titile {
    color: #ffffff !important;
}

/* oi_icon_titile em fundos claros */
.light_bg .oi_icon_titile,
#services .oi_icon_titile,
#clients .oi_icon_titile,
#contacts .oi_icon_titile {
    color: #333333 !important;
}

/* ================================================
   CLASSE .oi_white - FORÇA BRANCO EM FUNDO ESCURO
   ================================================ */

/* Regra base para oi_white - adapta ao fundo */
.oi_white {
    color: #ffffff !important; /* Força branco quando especificado */
}

/* oi_white em fundos escuros (correto) */
.dark_bg .oi_white,
.dark_bg h1.oi_white,
.dark_bg .oi_icon_titile.oi_white,
.dark_bg h2.oi_white,
.dark_bg h3.oi_white,
.dark_bg h4.oi_white,
.dark_bg h5.oi_white,
#identity .oi_white,
#management .oi_white {
    color: #ffffff !important;
}

/* oi_white em fundos claros (deve ser preto para contraste) */
.light_bg .oi_white,
.light_bg h1.oi_white,
.light_bg .oi_icon_titile.oi_white,
.light_bg h2.oi_white,
.light_bg h3.oi_white,
.light_bg h4.oi_white,
.light_bg h5.oi_white,
#services .oi_white,
#clients .oi_white,
#contacts .oi_white {
    color: #333333 !important;
}

/* ================================================
   CLASSE .oi_black - FORÇA PRETO EM FUNDO CLARO
   ================================================ */

/* Regra base para oi_black */
.oi_black {
    color: #333333 !important; /* Força preto quando especificado */
}

/* oi_black em fundos claros (correto) */
.light_bg .oi_black,
.light_bg h1.oi_black,
.light_bg .oi_icon_titile.oi_black,
.light_bg h2.oi_black,
.light_bg h3.oi_black,
.light_bg h4.oi_black,
.light_bg h5.oi_black,
#services .oi_black,
#clients .oi_black,
#contacts .oi_black {
    color: #333333 !important;
}

/* oi_black em fundos escuros (deve ser branco para contraste) */
.dark_bg .oi_black,
.dark_bg h1.oi_black,
.dark_bg .oi_icon_titile.oi_black,
.dark_bg h2.oi_black,
.dark_bg h3.oi_black,
.dark_bg h4.oi_black,
.dark_bg h5.oi_black,
#identity .oi_black,
#management .oi_black {
    color: #ffffff !important;
}

/* ================================================
   REGRAS ESPECÍFICAS PARA SEÇÕES IDENTIFICADAS
   ================================================ */

/* Seção Identity (dark_bg) */
#identity h1,
#identity .oi_icon_titile {
    color: #ffffff !important;
}

/* Seção Services (light_bg) */
#services h1,
#services .oi_icon_titile,
#services h2,
#services .item-serv-title {
    color: #333333 !important;
}

/* Seção Management (dark_bg) */
#management h1,
#management .oi_icon_titile,
#management h3,
#management h5,
#management .oi_tesimonial_content,
#management .oi_tesimonial_title {
    color: #ffffff !important;
}

/* Seção Clients (light_bg) - mas tem título oi_white */
#clients h1,
#clients .oi_icon_titile {
    color: #333333 !important;
}

/* Seção Contacts (light_bg) */
#contacts h1,
#contacts .oi_icon_titile,
#contacts h4 {
    color: #333333 !important;
}

/* ================================================
   FORÇA MÁXIMA - SOBRESCREVE QUALQUER OUTRA REGRA
   ================================================ */

/* Para garantir que as regras sejam aplicadas */
[class*="dark_bg"] h1,
[class*="dark_bg"] h2,
[class*="dark_bg"] h3,
[class*="dark_bg"] h4,
[class*="dark_bg"] h5 {
    color: #ffffff !important;
}

[class*="light_bg"] h1,
[class*="light_bg"] h2,
[class*="light_bg"] h3,
[class*="light_bg"] h4,
[class*="light_bg"] h5 {
    color: #333333 !important;
}

/* ================================================
   RESPONSIVIDADE PARA .oi_icon_titile, .oi_white, .oi_black
   ================================================ */

/* DESKTOP (≥993px) */
@media (min-width: 993px) {
    .oi_icon_titile,
    .oi_white,
    .oi_black {
        font-size: 36px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin: 20px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
    }
}

/* TABLET (769px-992px) */
@media (min-width: 769px) and (max-width: 992px) {
    .oi_icon_titile,
    .oi_white,
    .oi_black {
        font-size: 32px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin: 18px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        letter-spacing: 0.4px !important;
    }
}

/* MOBILE (≤768px) */
@media (max-width: 768px) {
    .oi_icon_titile,
    .oi_white,
    .oi_black {
        font-size: 28px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin: 15px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        letter-spacing: 0.3px !important;
    }
}

/* MOBILE PEQUENO (≤480px) */
@media (max-width: 480px) {
    .oi_icon_titile,
    .oi_white,
    .oi_black {
        font-size: 24px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin: 12px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        letter-spacing: 0.2px !important;
    }
}

/* MOBILE MUITO PEQUENO (≤320px) */
@media (max-width: 320px) {
    .oi_icon_titile,
    .oi_white,
    .oi_black {
        font-size: 22px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        text-align: center !important;
        letter-spacing: 0.1px !important;
    }
}

/* ================================================
   COMBINAÇÕES ESPECÍFICAS COM OUTRAS CLASSES
   ================================================ */

/* Força a cor correta mesmo com múltiplas classes */
.dark_bg h1.oi_icon_titile.oi_white,
.dark_bg .oi_icon_titile.oi_white {
    color: #ffffff !important;
}

.light_bg h1.oi_icon_titile.oi_white,
.light_bg .oi_icon_titile.oi_white {
    color: #333333 !important;
}

.dark_bg h1.oi_icon_titile.oi_black,
.dark_bg .oi_icon_titile.oi_black {
    color: #ffffff !important;
}

.light_bg h1.oi_icon_titile.oi_black,
.light_bg .oi_icon_titile.oi_black {
    color: #333333 !important;
}