/* ========================================
   ARQUIVO CSS PRINCIPAL - STYLE.CSS
   Projeto: OitavoRI
   ======================================== */

/* ========================================
   1. CONFIGURAÇÕES DE LOGO E HEADER
   ======================================== */

/* Logo principal no header - tamanho padrão */
.header-default .logo a img {
  max-height: 110px;
  width: auto;
  transition: max-height 0.3s ease;
}

/* Logo no header/navegação - versão menor */
.logo img {
    max-width: 100px;
    height: auto;
}

/* ========================================
   2. SLIDER PRINCIPAL - HERO SECTION (CONSOLIDADO)
   ======================================== */

/* Configurações gerais do slider principal */
.single-rn-slider {
    overflow: hidden;
}

/* Overlay do background com gradiente sutil */
.single-rn-slider .bg-overlay {
    background: linear-gradient(45deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.2) 100%) !important;
}

/* Container do slider ocupando toda largura */
.single-rn-slider .container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Posicionamento do conteúdo interno do slider - VERSÃO ÚNICA */
.single-rn-slider .inner {
    position: relative;
    top: -147px; /* Sobe mais para melhor alinhamento no horizonte */
}

/* Estilização do título principal no slider - VERSÃO ÚNICA */
.single-rn-slider .inner .title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 25px !important; /* Espaçamento otimizado */
    flex-direction: row !important;
    font-size: 5.5rem !important; /* Tamanho equilibrado */
    margin: 0 !important;
    padding: 0 20px;
    font-weight: bold !important;
}

/* Logo dentro do título do slider - VERSÃO ÚNICA */
.title img {
    max-width: 90px !important; /* Tamanho proporcional */
    height: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

/* ========================================
   3. RESPONSIVIDADE COMPLETA - CONSOLIDADA
   ======================================== */

/* Tablets grandes (1200px até desktop) */
@media (max-width: 1200px) {
    .single-rn-slider .inner {
        top: -84px;
    }

    .single-rn-slider .inner .title {
        font-size: 4.8rem !important;
        gap: 22px !important;
    }

    .title img {
        max-width: 70px !important;
    }
}

/* Tablets (1024px até 1200px) */
@media (max-width: 1024px) {
    .single-rn-slider .inner {
        top: -105px;
    }

    .single-rn-slider .inner .title {
        font-size: 4rem !important;
        gap: 20px !important;
    }

    .title img {
        max-width: 70px !important;
    }
}

/* Mobile horizontal (768px até 1024px) - VERSÃO ÚNICA */
@media (max-width: 768px) {
    .single-rn-slider .inner {
        top: -110px;
    }

    .single-rn-slider .inner .title {
        font-size: 3rem !important;
        flex-direction: column !important; /* Empilha verticalmente no mobile */
        gap: 15px !important;
    }

    .title img {
        max-width: 70px !important;
    }
}

/* Mobile (480px até 768px) */
@media (max-width: 480px) {
    .single-rn-slider .inner {
        top: -88px;
    }

    .single-rn-slider .inner .title {
        font-size: 2.2rem !important;
        gap: 12px !important;
    }

    .title img {
        max-width: 55px !important;
    }
}

/* Mobile pequeno (até 480px) */
@media (max-width: 320px) {
    .single-rn-slider .inner {
        top: -30px;
    }

    .single-rn-slider .inner .title {
        font-size: 1.8rem !important;
        gap: 10px !important;
    }

    .title img {
        max-width: 50px !important;
    }
}

/* ========================================
   4. SEÇÃO ABOUT - LOGO ESDI
   ======================================== */

/* Responsividade para container da logo ESDI */
@media (max-width: 767px) {
    .logo-container {
        min-height: 200px;
        padding: 30px;
    }

    .theme-adaptative-logo {
        max-height: 80px;
    }
}

/* ========================================
   5. SEÇÃO DE CLIENTES/PARCEIROS
   ======================================== */

/* Container principal em grid para os clientes */
.client-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    margin-bottom: 40px;
}

/* Estilização individual de cada item de cliente */
.client-item {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1e1e1e; /* Fundo escuro para ambos os temas */
    border-radius: 6px;
    padding: 25px 15px;
    min-height: 100px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

/* Efeito hover nos itens de cliente */
.client-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* Estilização do nome do cliente */
.client-name {
    font-size: 14px;
    font-weight: 500;
    color: #ffffff; /* Texto branco para ambos os temas */
    line-height: 1.4;
}

/* Responsividade da grade de clientes - tablets */
@media (max-width: 767px) {
    .client-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
}

/* Responsividade da grade de clientes - mobile pequeno */
@media (max-width: 575px) {
    .client-grid-container {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   6. FOOTER - TEMA CLARO APENAS
   ======================================== */

/* Background e estrutura geral do footer no tema claro */
body:not(.active-dark-mode) .footer-style-default {
  background-color: var(--color-lightest);
  background-image: linear-gradient(0deg, var(--color-lighter), var(--color-lightest));
  border-top: 1px solid var(--color-light);
}

/* Títulos dos widgets no footer - tema claro */
body:not(.active-dark-mode) .footer-style-default .footer-top .rn-footer-widget .title {
  color: var(--color-tertiary);
  font-weight: 600;
}

/* Subtítulos no footer - tema claro */
body:not(.active-dark-mode) .footer-style-default .footer-top .rn-footer-widget .subtitle {
  color: var(--color-secondary);
}

/* Texto principal no footer - tema claro */
body:not(.active-dark-mode) .footer-style-default .footer-top .rn-footer-widget .text-big {
  color: var(--color-dark);
}

/* Descrições no footer - tema claro */
body:not(.active-dark-mode) .footer-style-default .footer-top .rn-footer-widget .description {
  color: var(--color-gray);
}

/* Links do footer - tema claro */
body:not(.active-dark-mode) .footer-style-default .footer-top .rn-footer-widget .footer-link li a {
  color: var(--color-dark);
  font-weight: 500;
}

body:not(.active-dark-mode) .footer-style-default .footer-top .rn-footer-widget .footer-link li a:hover {
  color: var(--color-primary);
}

/* Links de contato destacados (telefone, email, whatsapp) - tema claro */
body:not(.active-dark-mode) .footer-style-default a[href^="tel:"],
body:not(.active-dark-mode) .footer-style-default a[href^="mailto:"],
body:not(.active-dark-mode) .footer-style-default a[href^="https://wa.me"] {
  color: var(--color-tertiary);
  font-weight: 600;
}

/* Área de copyright - tema claro */
body:not(.active-dark-mode) .copyright-area {
  background-color: var(--color-lighter);
  border-top: 1px solid var(--color-light);
}

/* Texto de copyright - tema claro */
body:not(.active-dark-mode) .copyright-text {
  color: var(--color-gray);
  font-weight: 500;
}

/* Links do menu de copyright - tema claro */
body:not(.active-dark-mode) .ft-menu a {
  color: var(--color-dark);
  font-weight: 500;
}

body:not(.active-dark-mode) .ft-menu a:hover {
  color: var(--color-primary);
}

/* ========================================
   7. ELEMENTOS AUXILIARES E UTILITÁRIOS
   ======================================== */

/* Estilo para links de crédito */
.credit-link {
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
}

.credit-link:hover {
    color: var(--color-secondary, #1e40af);
    text-decoration: underline;
}

/* Links de crédito em tema escuro */
[data-theme="dark"] .credit-link {
    color: var(--color-tertiary, #60a5fa);
}

[data-theme="dark"] .credit-link:hover {
    color: var(--color-primary, #93c5fd);
}

/* ========================================
   8. CONTROLES DE NAVEGAÇÃO DO SLIDER
   ======================================== */

/* Ocultar dots de navegação do slider */
.rwt-slider-area .slick-dots,
.rwt-slider-area .rn-slick-dots,
.slider-dot .slick-dots {
    display: none !important;
}

/* Ocultar dots individuais da navegação */
.rwt-slider-area .slick-dots li,
.rwt-slider-area .rn-slick-dots li {
    display: none !important;
}

/* ========================================
   FIM DO ARQUIVO CSS - CONSOLIDADO E LIMPO! ✅
   ======================================== */


/* ==========================================================================
   CSS CORRIGIDO - LOGO MAIOR E ÍCONE BONITO
   ADICIONAR NO FINAL DO SEU style.css (SUBSTITUI A SEÇÃO ANTERIOR)
   ========================================================================== */

/* 1. LOGO NO HEADER - CORRIGINDO CLASSES REAIS */

/* Sobrescreve TODAS as regras de logo existentes */
.logo .logo-light,
.logo .logo-dark,
.logo img,
.header-default .logo a img {
    max-height: 130px !important; /* Aumenta significativamente */
    max-width: none !important; /* Remove limitação de largura */
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    transition: all 0.3s ease !important;
}

/* Container da logo ajustado */
.logo {
    display: flex !important;
    align-items: center !important;
    height: 90px !important; /* Altura maior para acomodar */
    min-height: 90px !important;
}

.logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    width: auto !important;
}

/* Header com altura ajustada */
.rainbow-header .container,
.rainbow-header .row {
    min-height: 100px !important;
}

.rainbow-header {
    padding: 10px 0 !important;
}

/* Quando header fica sticky */
.header-sticky.stick .logo .logo-light,
.header-sticky.stick .logo .logo-dark,
.header-sticky.stick .logo img {
    max-height: 70px !important; /* Menor quando sticky */
}

.header-sticky.stick {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px) !important;
    box-shadow: 0 2px 25px rgba(0, 0, 0, 0.1) !important;
}

/* 2. RESPONSIVIDADE DA LOGO */
@media (max-width: 1024px) {
    .logo .logo-light,
    .logo .logo-dark,
    .logo img {
        max-height: 70px !important;
    }

    .logo {
        height: 80px !important;
    }
}

/* MOBILE - Logo menor apenas no celular */
@media (max-width: 767px) {
    .logo .logo-light,
    .logo .logo-dark,
    .logo img,
    .header-default .logo a img,
    .rainbow-header .logo img,
    .rn-header .logo img {
        max-height: 100px !important;
        max-width: 120px !important;
        width: auto !important;
        height: auto !important;
    }

    .logo {
        height: 75px !important;
        min-height: 55px !important;
    }

    .rainbow-header .container,
    .rainbow-header .row {
        min-height: 65px !important;
    }
}

@media (max-width: 480px) {
    .logo .logo-light,
    .logo .logo-dark,
    .logo img,
    .header-default .logo a img,
    .rainbow-header .logo img,
    .rn-header .logo img {
        max-height: 80px !important;
        max-width: 100px !important;
    }

    .logo {
        height: 70px !important;
    }
}








/* 3. ÍCONE DA CALCULADORA - REMOVE EMOJI FEIO */

/* Remove todos os fallbacks feios */
.feather-calculator:before,
.feather-calculator:empty:before {
    content: none !important;
}

/* Força reset do ícone */
.feather-calculator {
    font-family: "feather" !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Se ainda não funcionar, esconde completamente */
.feather-calculator:empty {
    display: none !important;
}

/* 4. SVG ELEGANTE PARA CALCULADORA */

/* Estilo para SVG da calculadora */
.calculadora-svg-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* 5. AJUSTES GERAIS */

/* Menu com espaçamento adequado */
.mainmenu-nav {
    margin-left: 25px !important;
}

/* Mobile menu ajustado */
@media (max-width: 991px) {
    .mainmenu-nav {
        margin-left: 0 !important;
    }

    .mobile-menu-bar {
        margin-left: 15px !important;
    }
}

/* 6. GARANTIA DE VISIBILIDADE */

/* Força visibilidade da logo */
.logo .logo-light,
.logo .logo-dark {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Remove qualquer overflow que possa cortar a logo */
.header-default,
.rainbow-header {
    overflow: visible !important;
}

.logo,
.logo a {
    overflow: visible !important;
}


/* ==========================================================================
   CSS PARA TROCA DE LOGO NO MENU MOBILE CONFORME TEMA
   ADICIONAR NO SEU style.css OU CRIAR UM ARQUIVO SEPARADO
   ========================================================================== */

/* 1. CONFIGURAÇÃO BÁSICA DAS LOGOS NO MENU MOBILE */
.popup-mobile-menu .logo img {
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    transition: opacity 0.3s ease !important;
}

/* 2. TROCA DE LOGO - TEMA CLARO */
/* Por padrão (tema claro), mostra logo escura e esconde logo clara */
.popup-mobile-menu .logo .logo-light {
    opacity: 1 !important;
    display: block !important;
}

.popup-mobile-menu .logo .logo-dark {
    opacity: 0 !important;
    display: none !important;
}

/* 3. TROCA DE LOGO - TEMA ESCURO */
/* Quando tema escuro ativo, mostra logo clara e esconde logo escura */

/* Para sistema que usa active-dark-mode no body */
body.active-dark-mode .popup-mobile-menu .logo .logo-light {
    opacity: 0 !important;
    display: none !important;
}

body.active-dark-mode .popup-mobile-menu .logo .logo-dark {
    opacity: 1 !important;
    display: block !important;
}

/* Para sistema que usa data-theme="dark" no html */
html[data-theme="dark"] .popup-mobile-menu .logo .logo-light {
    opacity: 0 !important;
    display: none !important;
}

html[data-theme="dark"] .popup-mobile-menu .logo .logo-dark {
    opacity: 1 !important;
    display: block !important;
}

/* Para sistema que usa dark-mode class no body */
body.dark-mode .popup-mobile-menu .logo .logo-light {
    opacity: 0 !important;
    display: none !important;
}

body.dark-mode .popup-mobile-menu .logo .logo-dark {
    opacity: 1 !important;
    display: block !important;
}

/* 4. FALLBACK PARA MEDIA QUERY (sistema do usuário) */
@media (prefers-color-scheme: dark) {
    /* Só aplica se não houver classe específica */
    body:not(.active-light-mode):not([data-theme="light"]) .popup-mobile-menu .logo .logo-light {
        opacity: 0 !important;
        display: none !important;
    }

    body:not(.active-light-mode):not([data-theme="light"]) .popup-mobile-menu .logo .logo-dark {
        opacity: 1 !important;
        display: block !important;
    }
}

/* 5. ESTILIZAÇÃO GERAL DO MENU MOBILE */
.popup-mobile-menu .logo {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
}

.popup-mobile-menu .logo a {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* Posicionamento absoluto para sobreposição perfeita */
.popup-mobile-menu .logo .logo-light,
.popup-mobile-menu .logo .logo-dark {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
}

/* Container deve ter altura definida para o posicionamento absoluto */
.popup-mobile-menu .logo a {
    height: 60px !important;
    width: auto !important;
    min-width: 150px !important; /* Largura mínima para acomodar logo */
}

/* 6. RESPONSIVIDADE */
@media (max-width: 480px) {
    .popup-mobile-menu .logo img {
        max-height: 50px !important;
    }

    .popup-mobile-menu .logo a {
        height: 50px !important;
        min-width: 120px !important;
    }
}

/* 7. ANIMAÇÃO SUAVE NA TROCA */
.popup-mobile-menu .logo .logo-light,
.popup-mobile-menu .logo .logo-dark {
    transition: all 0.3s ease !important;
}

/* 8. GARANTIA DE FUNCIONAMENTO */
/* Força reset de qualquer estilo conflitante */
.popup-mobile-menu .logo img {
    visibility: visible !important;
    max-width: none !important;
    object-fit: contain !important;
}