/* Sibraff Assistencial - Custom CSS */
/* Cores Personalizadas - Amarelo + Cinza escuro (padrão Seven) */
:root {
    --color-primary: #FEE044;
    --color-secondary: #1d1d1b;
    
    /* Tons harmoniosos do Primary (amarelo) */
    --color-primary-light: #FDE54D;
    --color-primary-lighter: #FEEB6B;
    --color-primary-dark: #F5D030;
    --color-primary-darker: #E5C020;
    
    /* Tons harmoniosos do Secondary (cinza escuro) */
    --color-secondary-light: #2d2d2b;
    --color-secondary-lighter: #3d3d3b;
    --color-secondary-dark: #151515;
    --color-secondary-darker: #0d0d0d;
    
    /* Cores neutras harmoniosas */
    --color-neutral-light: #f5f8fa;
    --color-neutral: #e8edf1;
    --color-neutral-dark: #d1d9e0;
    --color-text: #1d1d1b;
    --color-text-light: #5a6c7d;
    --color-text-lighter: #8a9ba8;
    
    /* Cores de destaque harmoniosas */
    --color-accent: #FEE044;
    --color-success: #FEE044;
    --color-info: #4a90a4;
    --color-warning: #d4a574;
    --color-danger: #c85a5a;
}

/* Override das cores primárias */
.text-color-primary,
a.text-color-primary {
    color: var(--color-primary) !important;
}

.bg-primary {
    background-color: var(--color-primary) !important;
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #1d1d1b !important;
}

.btn-primary:hover {
    background-color: var(--color-primary-light) !important;
    border-color: var(--color-primary-light) !important;
    color: #ffffff !important;
}

.btn-primary:focus,
.btn-primary:active {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
}

/* Cores secundárias */
.text-color-secondary,
a.text-color-secondary {
    color: var(--color-secondary) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.bg-secondary-light {
    background-color: var(--color-secondary-light) !important;
}

/* Customizações do header */
.custom-header-top-btn-style-1 {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 1rem !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.custom-header-top-btn-style-1:hover {
    background-color: var(--color-primary-dark) !important;
    border-color: var(--color-primary-dark) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
}

.custom-header-top-btn-style-1:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Backgrounds harmoniosos */
.bg-primary-light {
    background-color: var(--color-primary-lighter) !important;
}

.bg-neutral-light {
    background-color: var(--color-neutral-light) !important;
}

/* Textos harmoniosos */
.text-color-dark {
    color: var(--color-text) !important;
}

.text-color-muted {
    color: var(--color-text-light) !important;
}

/* Bordas harmoniosas */
.border-primary {
    border-color: var(--color-primary) !important;
}

.border-secondary {
    border-color: var(--color-secondary) !important;
}

.border-neutral {
    border-color: var(--color-neutral-dark) !important;
}

/* Placeholder para imagens */
.img-placeholder {
    background: linear-gradient(135deg, var(--color-neutral-light) 0%, var(--color-neutral) 100%);
    border: 2px dashed var(--color-neutral-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-lighter);
    font-size: 14px;
    text-align: center;
    min-height: 200px;
}

/* Ajustes gerais */
.custom-btn-border-radius {
    border-radius: 5px;
}

/* Links harmoniosos */
a {
    color: var(--color-primary);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary-dark);
}

a.text-color-secondary:hover {
    color: var(--color-secondary-light) !important;
}

/* Cards e elementos com cores harmoniosas */
.card {
    border-color: var(--color-neutral-dark);
}

.card-header {
    background-color: var(--color-neutral-light);
    border-bottom-color: var(--color-neutral-dark);
}

/* WhatsApp button fixo - mantém cor original do WhatsApp */
.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 100px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50%;
    text-align: center;
    font-size: 30px;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    animation: whatsapp-pulse 2s infinite;
}

.whatsapp-float:hover {
    background-color: #128c7e;
    color: #FFF;
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
    text-decoration: none;
}

.whatsapp-float:active {
    transform: scale(0.95);
}

/* Animação de pulsar para o botão WhatsApp */
@keyframes whatsapp-pulse {
    0% {
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0.7);
    }
    50% {
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 10px rgba(37, 211, 102, 0);
    }
    100% {
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4), 0 0 0 0 rgba(37, 211, 102, 0);
    }
}

/* Responsivo para mobile */
@media (max-width: 767px) {
    .whatsapp-float {
        width: 55px;
        height: 55px;
        bottom: 90px;
        right: 20px;
        font-size: 28px;
    }
}

/* Overlay e backgrounds de seções */
.overlay-color-primary {
    background-color: rgba(193, 174, 88, 0.9) !important;
}

.overlay-color-secondary {
    background-color: rgba(21, 44, 72, 0.9) !important;
}

/* Override para cores tertiary - usar primary (dourado) */
.overlay-color-tertiary {
    background-color: rgba(193, 174, 88, 0.9) !important;
}

.text-color-tertiary,
a.text-color-tertiary {
    color: #FEE044 !important;
}

.text-color-hover-tertiary:hover {
    color: #F5D030 !important;
}

.svg-fill-color-tertiary svg,
.svg-fill-color-tertiary path,
.svg-fill-color-tertiary circle,
.svg-fill-color-tertiary rect {
    fill: #FEE044 !important;
}

.custom-svg-fill-color-tertiary-darken {
    fill: rgba(193, 174, 88, 0.8) !important;
}

/* Override global para todas as classes do tema que usam cores tertiary/primary do skin */
html .text-color-primary,
html .text-primary,
html .text-color-hover-primary:hover,
html .text-hover-primary:hover {
    color: #FEE044 !important;
}

html .text-color-tertiary,
html .text-tertiary,
html .text-color-hover-tertiary:hover,
html .text-hover-tertiary:hover {
    color: #FEE044 !important;
}

/* Override para links e navegação */
.nav-link,
.nav-link:focus,
.nav-link:hover,
.nav-link.active,
.nav-link.active:hover,
a.nav-link {
    color: #1d1d1b !important;
}

.nav-link.active,
.nav-link.active:focus,
.nav-link.active:hover {
    color: #FEE044 !important;
    border-bottom-color: #FEE044 !important;
}

.nav-link:hover {
    color: #FEE044 !important;
}

/* Dropdown menu */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(193, 174, 88, 0.1) !important;
    color: #FEE044 !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: #FEE044 !important;
    color: #ffffff !important;
}

/* Icon SVG fills */
[data-icon] svg,
[data-icon] path,
.icon-animated svg,
.icon-animated path {
    fill: #FEE044 !important;
}

/* Header específico */
.header-nav-main .nav-link.active::after,
.header-nav-main .nav-link.active::before {
    background-color: #FEE044 !important;
    border-color: #FEE044 !important;
}

/* Backgrounds com overlay */
.overlay-color-tertiary::before,
.overlay-color-tertiary::after {
    background-color: rgba(193, 174, 88, 0.9) !important;
}

/* Background do header */
.custom-header-top-btn-style-1 {
    background-color: #FEE044 !important;
    border-color: #FEE044 !important;
}

/* Destaques e highlights */
.highlight-primary {
    background-color: var(--color-primary-lighter);
    color: var(--color-primary-darker);
    padding: 2px 8px;
    border-radius: 3px;
}

.highlight-secondary {
    background-color: var(--color-secondary-light);
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 3px;
}

/* Badges e labels */
.badge-primary {
    background-color: var(--color-primary);
    color: #ffffff;
}

.badge-secondary {
    background-color: var(--color-secondary);
    color: #ffffff;
}

/* ============================================
   OVERRIDES FORTES PARA MENU E NAVEGAÇÃO
   Sobrescrevem o skin-auto-services.css
   ============================================ */

/* Override global para todas as classes do tema que usam cores primary/tertiary */
html .text-color-primary,
html .text-primary,
html .text-color-hover-primary:hover,
html .text-hover-primary:hover,
html body .text-color-primary,
html body .text-primary {
    color: #FEE044 !important;
}

html .text-color-tertiary,
html .text-tertiary,
html .text-color-hover-tertiary:hover,
html .text-hover-tertiary:hover,
html body .text-color-tertiary,
html body .text-tertiary {
    color: #FEE044 !important;
}

/* Menu de navegação - links e estados */
.header-nav-main .nav-link,
.header-nav-main .nav-link:focus,
.header-nav-main .nav-link:hover,
.header-nav-main a.nav-link,
header .header-nav-main .nav-link,
header .header-nav-main .nav-link:focus,
header .header-nav-main .nav-link:hover {
    color: #1d1d1b !important;
}

.header-nav-main .nav-link.active,
.header-nav-main .nav-link.active:focus,
.header-nav-main .nav-link.active:hover,
.header-nav-main .nav-link.active::after,
.header-nav-main .nav-link.active::before,
header .header-nav-main .nav-link.active,
header .header-nav-main .nav-link.active:focus,
header .header-nav-main .nav-link.active:hover,
#header .header-nav-main .nav-link.active {
    color: #FEE044 !important;
    border-bottom-color: #FEE044 !important;
    background-color: transparent !important;
}

.header-nav-main .nav-link:hover,
header .header-nav-main .nav-link:hover,
#header .header-nav-main .nav-link:hover {
    color: #FEE044 !important;
}

/* Dropdown toggle */
.header-nav-main .dropdown-toggle,
.header-nav-main .dropdown-toggle:focus,
.header-nav-main .dropdown-toggle:hover {
    color: #1d1d1b !important;
}

.header-nav-main .dropdown-toggle:hover,
.header-nav-main .dropdown-toggle:focus:hover {
    color: #FEE044 !important;
}

/* Dropdown menu */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item:focus {
    color: #1d1d1b !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus:hover {
    background-color: rgba(193, 174, 88, 0.1) !important;
    color: #FEE044 !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active:hover {
    background-color: #FEE044 !important;
    color: #ffffff !important;
}

/* SVG icons - override para todas as ocorrências */
[data-icon] svg,
[data-icon] path,
.icon-animated svg,
.icon-animated path,
.svg-fill-color-tertiary svg,
.svg-fill-color-tertiary path,
.svg-fill-color-tertiary circle,
.svg-fill-color-tertiary rect,
.svg-fill-color-primary svg,
.svg-fill-color-primary path {
    fill: #FEE044 !important;
}

/* Backgrounds com overlay tertiary */
.overlay-color-tertiary::before,
.overlay-color-tertiary::after,
section.overlay-color-tertiary {
    background-color: rgba(193, 174, 88, 0.9) !important;
}

/* Header top buttons - já tem estilo mas reforçando */
.custom-header-top-btn-style-1 {
    background-color: #FEE044 !important;
    border-color: #FEE044 !important;
}

/* Links de texto tertiary */
a.text-color-tertiary,
.text-color-tertiary {
    color: #FEE044 !important;
}

a.text-color-tertiary:hover,
.text-color-tertiary:hover {
    color: #F5D030 !important;
}

/* Elementos específicos do template que podem ter cores tertiary */
.custom-highlight-1,
.highlight-primary {
    background-color: rgba(193, 174, 88, 0.2) !important;
    color: #FEE044 !important;
}

/* SVG shapes e paths */
.custom-svg-fill-color-tertiary-darken,
path.custom-svg-fill-color-tertiary-darken {
    fill: rgba(193, 174, 88, 0.8) !important;
}

/* Garantir que botões usem a cor correta */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: #FEE044 !important;
    border-color: #FEE044 !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: #F5D030 !important;
    border-color: #F5D030 !important;
}

/* ============================================
   ESTILOS ESPECÍFICOS PARA LANDING PAGES
   ============================================ */

/* Placeholder de imagens melhorado */
.img-placeholder {
    background-color: #1d1d1b;
    background-image: linear-gradient(45deg, #34495e 25%, transparent 25%), 
                      linear-gradient(-45deg, #34495e 25%, transparent 25%), 
                      linear-gradient(45deg, transparent 75%, #34495e 75%), 
                      linear-gradient(-45deg, transparent 75%, #34495e 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ecf0f1;
    font-size: 14px;
    text-align: center;
    border: 2px solid #1a252f;
    position: relative;
    transition: all 0.3s ease;
}

.img-placeholder:hover {
    border-color: #FEE044;
    box-shadow: 0 4px 15px rgba(193, 174, 88, 0.2);
}

.img-placeholder::before {
    content: attr(data-dimensions);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 600;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: 16px;
}

.img-placeholder::after {
    content: "📷";
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    opacity: 0.5;
}

/* Melhorias nos botões CTA */
.lp-cta-primary {
    background: linear-gradient(135deg, #FEE044 0%, #F5D030 100%);
    border: none;
    color: #ffffff;
    font-weight: 700;
    padding: 16px 32px;
    font-size: 1.1rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(193, 174, 88, 0.4);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(193, 174, 88, 0.5);
    background: linear-gradient(135deg, #FDE54D 0%, #FEE044 100%);
    color: #ffffff;
    text-decoration: none;
}

.lp-cta-secondary {
    background: #ffffff;
    border: 2px solid #FEE044;
    color: #1d1d1b;
    font-weight: 700;
    padding: 16px 32px;
    font-size: 1.1rem;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.lp-cta-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.4);
    background: #FEE044;
    color: #ffffff;
    border-color: #FEE044;
    text-decoration: none;
}

/* Cards melhorados */
.lp-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    overflow: hidden;
}

.lp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.lp-card .card-body {
    padding: 2rem;
}

/* Seções com melhor espaçamento */
.lp-section {
    padding: 80px 0;
}

.lp-section-alt {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

/* Hero melhorado */
.lp-hero {
    min-height: 600px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.lp-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(21, 44, 72, 0.95) 0%, rgba(21, 44, 72, 0.85) 100%);
    z-index: 1;
}

.lp-hero-content {
    position: relative;
    z-index: 2;
}

/* Badges melhorados */
.lp-badge {
    display: inline-block;
    padding: 10px 20px;
    background: linear-gradient(135deg, #FEE044 0%, #F5D030 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(193, 174, 88, 0.3);
    margin-bottom: 1rem;
}

/* Tabelas melhoradas */
.lp-table {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.lp-table thead {
    background: linear-gradient(135deg, #FEE044 0%, #F5D030 100%);
}

.lp-table thead th {
    border: none;
    padding: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
}

.lp-table tbody td {
    padding: 20px;
    vertical-align: middle;
    border-color: #e9ecef;
}

.lp-table tbody tr:hover {
    background-color: #f8f9fa;
}

/* Formulários melhorados */
.lp-form {
    background: #ffffff;
    border-radius: 12px;
    padding: 3rem;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.lp-form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.lp-form .form-control:focus {
    border-color: #FEE044;
    box-shadow: 0 0 0 0.2rem rgba(193, 174, 88, 0.25);
}

.lp-form label {
    font-weight: 600;
    color: #1d1d1b;
    margin-bottom: 8px;
}

/* Animações suaves */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.lp-animate {
    animation: fadeInUp 0.6s ease-out;
}

/* Responsividade melhorada */
@media (max-width: 768px) {
    .lp-hero {
        min-height: 500px;
        text-align: center;
    }
    
    .lp-cta-primary,
    .lp-cta-secondary {
        width: 100%;
        margin-bottom: 1rem;
        font-size: 1rem;
        padding: 14px 24px;
    }
    
    .lp-section {
        padding: 60px 0;
    }
    
    .lp-form {
        padding: 2rem 1.5rem;
    }
}

/* Scroll suave */
html {
    scroll-behavior: smooth;
}

/* Melhorias de acessibilidade */
.lp-cta-primary:focus,
.lp-cta-secondary:focus {
    outline: 3px solid rgba(193, 174, 88, 0.5);
    outline-offset: 2px;
}

/* Loading states */
.lp-loading {
    opacity: 0.6;
    pointer-events: none;
}
/* ============================================
   MELHORIAS DE INTERFACE - FASE 3
   ============================================ */

/* Melhorias de Acessibilidade */
*:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Melhorias em Botões - Transições Suaves */
.btn,
button {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    box-shadow: 0 4px 15px rgba(193, 174, 88, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(193, 174, 88, 0.5);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(193, 174, 88, 0.3);
}

/* Melhorias em Cards - Sombras e Hover */
.card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 12px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Melhorias em Formulários */
.form-control,
.form-select {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem rgba(193, 174, 88, 0.25);
    outline: none;
}

/* Melhorias em Ícones */
i[class*="icon"],
i[class*="fa"] {
    transition: transform 0.3s ease;
}

a:hover i[class*="icon"],
a:hover i[class*="fa"],
button:hover i[class*="icon"],
button:hover i[class*="fa"] {
    transform: scale(1.1);
}

/* Melhorias em Listas */
ul.list-icons li {
    transition: all 0.3s ease;
    padding: 4px 0;
}

ul.list-icons li:hover {
    padding-left: 8px;
}

ul.list-icons li:hover i {
    transform: translateX(4px);
}

/* Melhorias em Badges */
.badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.badge:hover {
    transform: scale(1.05);
}

/* Melhorias em Tabelas */
.table {
    border-radius: 8px;
    overflow: hidden;
}

.table thead {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: #ffffff;
}

.table tbody tr {
    transition: all 0.3s ease;
}

.table tbody tr:hover {
    background-color: rgba(193, 174, 88, 0.05);
    transform: scale(1.01);
}

/* ============================================
   OTIMIZAÇÃO DE QUALIDADE DE IMAGENS
   Alta qualidade sem prejudicar desempenho
   ============================================ */

/* Melhorias em Imagens - Alta Qualidade (Otimizado) */
img {
    transition: transform 0.3s ease;
    max-width: 100%;
    height: auto;
    /* Garantir alta qualidade de renderização - otimizado para performance */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    /* Apenas aplicar otimizações avançadas em imagens grandes */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* Aplicar alta qualidade apenas em imagens importantes (evita overhead) */
img[src*="logo"],
img[src*="banner"],
img[src*="slider"],
img[src*="hero"],
.header-logo img,
.footer-logo-white,
.service-card img,
.plan-feature-card img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    transform: translateZ(0);
}

a:hover img {
    transform: scale(1.02);
}

/* Otimização: aplicar alta qualidade apenas em imagens críticas */
@media (min-width: 768px) {
    /* Em telas maiores, aplicar otimizações avançadas */
    img[src*="logo"],
    img[src*="banner"],
    img[src*="slider"],
    .header-logo img,
    .footer-logo-white {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Background images - alta qualidade (otimizado) */
.background-image-wrapper,
.slider-slide .background-image-wrapper,
.custom-section-background .background-image-wrapper {
    /* Otimizações de qualidade para backgrounds importantes */
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    /* Usar GPU acceleration apenas quando necessário */
    will-change: transform;
}

/* Melhorias em Responsividade */
@media (max-width: 991px) {
    .card:hover {
        transform: translateY(-4px);
    }
    
    .btn:hover {
        transform: translateY(-1px);
    }
}

@media (max-width: 575px) {
    .card-body {
        padding: 1.25rem;
    }
}

/* Melhorias em Dropdowns */
.dropdown-menu {
    border-radius: 8px;
    border: none;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    margin-top: 8px;
}

.dropdown-item {
    padding: 10px 20px;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: linear-gradient(90deg, rgba(193, 174, 88, 0.1) 0%, transparent 100%);
    padding-left: 24px;
}

/* ============================================
   CORREÇÕES: Header-top visível ao rolar e Mobile
   ============================================ */

/* Manter header-top sempre visível */
#header .header-top {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1001 !important;
    transition: all 0.3s ease !important;
}

/* Quando o header fica sticky, manter header-top visível */
#header.header-effect-shrink.header-shrink .header-top {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    background-color: inherit !important;
}

/* Garantir que o header-body inclua o header-top quando sticky */
#header.header-effect-shrink.header-shrink .header-body {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Correções para Mobile - Header-top */
@media (max-width: 991px) {
    .header-top {
        padding: 0.5rem 0 !important;
    }
    
    .header-top .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .header-top .header-row {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .header-top .header-column {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-bottom: 0.5rem !important;
    }
    
    .header-top .header-column:last-child {
        margin-bottom: 0 !important;
    }
    
    .header-top .header-column.justify-content-start,
    .header-top .header-column.justify-content-end {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .header-top .custom-header-top-btn-style-1 {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0.25rem auto !important;
        display: block !important;
        text-align: center !important;
        font-size: 0.8rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    .header-top .nav-pills {
        justify-content: center !important;
        width: 100% !important;
        margin: 0 !important;
    }
    
    .header-top .nav-pills .nav-item {
        width: 100% !important;
        text-align: center !important;
    }
    
    .header-top .nav-pills .nav-item span {
        font-size: 0.85rem !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}

/* Correções específicas para telas muito pequenas */
@media (max-width: 575px) {
    .header-top {
        padding: 0.4rem 0 !important;
    }
    
    .header-top .custom-header-top-btn-style-1 {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
        max-width: 100% !important;
    }
    
    .header-top .nav-pills .nav-item span {
        font-size: 0.75rem !important;
    }
}

/* ============================================
   MENU STICKY NA VERSÃO DESKTOP
   ============================================ */

/* Garantir que o menu acompanhe a rolagem no desktop */
@media (min-width: 992px) {
    /* Header sticky no desktop */
    #header.header-effect-shrink .header-body {
        position: relative !important;
        transition: all 0.3s ease !important;
    }
    
    /* Quando o header fica sticky, fixar o header-body */
    #header.header-effect-shrink.header-shrink .header-body {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 9999 !important;
        background-color: #ffffff !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        transition: all 0.3s ease !important;
    }
    
    /* Manter header-top visível quando sticky */
    #header.header-effect-shrink.header-shrink .header-top {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: none !important;
        overflow: visible !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        background-color: inherit !important;
    }
    
    /* Garantir que o header-container (menu) fique visível */
    #header.header-effect-shrink.header-shrink .header-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Garantir que no mobile o sticky não interfira */
@media (max-width: 991px) {
    #header.header-effect-shrink .header-body {
        position: relative !important;
    }
    
    #header.header-effect-shrink.header-shrink .header-body {
        position: relative !important;
        box-shadow: none !important;
    }
}

/* ============================================
   ESPAÇAMENTO HARMÔNICO ENTRE HEADER-TOP E MENU
   ============================================ */

/* Aumentar espaçamento entre header-top e header-container (menu) */
#header .header-container {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
    transition: padding 0.3s ease !important;
}

/* Quando o header fica sticky, manter espaçamento adequado */
#header.header-effect-shrink.header-shrink .header-container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

/* Ajustar espaçamento do header-top para melhor harmonia */
#header .header-top {
    padding-bottom: 0.75rem !important;
}

/* Desktop - Espaçamento mais generoso */
@media (min-width: 992px) {
    #header .header-container {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    #header.header-effect-shrink.header-shrink .header-container {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    
    #header .header-top {
        padding-bottom: 1rem !important;
    }
}

/* Mobile - Espaçamento ajustado */
@media (max-width: 991px) {
    #header .header-container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    #header .header-top {
        padding-bottom: 0.5rem !important;
    }
}

/* ============================================
   CORREÇÃO: LOGO NÃO INVADIR PARTE SUPERIOR
   ============================================ */

/* Garantir que o logo tenha espaçamento adequado do topo */
#header .header-logo {
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flex !important;
    align-items: center !important;
}

#header .header-logo img {
    margin-top: 0 !important;
    padding-top: 0 !important;
    vertical-align: middle !important;
}

/* Garantir que o header-container tenha padding-top suficiente */
#header .header-container {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

/* Desktop - Espaçamento mais generoso */
@media (min-width: 992px) {
    #header .header-container {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    #header.header-effect-shrink.header-shrink .header-container {
        padding-top: 1.25rem !important;
        padding-bottom: 1.25rem !important;
    }
    
    #header .header-top {
        padding-bottom: 1rem !important;
    }
}

/* Mobile - Espaçamento ajustado */
@media (max-width: 991px) {
    #header .header-container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    #header .header-top {
        padding-bottom: 0.5rem !important;
    }
}
/* ============================================
   PADRONIZAÇÃO: MENU E FOOTER PARA TODAS AS PÁGINAS
   ============================================ */

/* Correção do Logo - Prevenir Distorção */
.header-logo img {
	max-width: 200px !important;
	width: auto !important;
	height: auto !important;
	object-fit: contain !important;
	transition: all 0.3s ease;
}

/* Quando o header encolhe (sticky) */
.header-effect-shrink.header-shrink .header-logo img {
	max-width: 150px !important;
	height: auto !important;
}

/* Garantir que o logo não distorce em qualquer resolução */
@media (max-width: 991px) {
	.header-logo img {
		max-width: 180px !important;
	}
	
	.header-effect-shrink.header-shrink .header-logo img {
		max-width: 140px !important;
	}
}

@media (max-width: 575px) {
	.header-logo img {
		max-width: 150px !important;
	}
	
	.header-effect-shrink.header-shrink .header-logo img {
		max-width: 120px !important;
	}
}

/* CORREÇÃO: LOGO NÃO INVADIR PARTE SUPERIOR QUANDO STICKY */
@media (min-width: 992px) {
	/* Quando sticky, reduzir altura do menu para ficar mais harmônico */
	#header.header-effect-shrink.header-shrink .header-container {
		padding-top: 0.35rem !important;
		padding-bottom: 0.35rem !important;
		margin-top: 0 !important;
	}
	
	/* Garantir que o header-top tenha altura reduzida quando sticky */
	#header.header-effect-shrink.header-shrink .header-top {
		min-height: 42px !important;
		height: auto !important;
		max-height: none !important;
		padding-top: 0.35rem !important;
		padding-bottom: 0.35rem !important;
		display: flex !important;
		align-items: center !important;
		margin-bottom: 0 !important;
		overflow: visible !important;
	}
	
	/* Logo quando sticky - aumentar tamanho proporcionalmente */
	#header.header-effect-shrink.header-shrink .header-logo {
		margin-top: 0 !important;
		padding-top: 0 !important;
		align-items: center !important;
		position: relative !important;
		top: 0 !important;
	}
	
	#header.header-effect-shrink.header-shrink .header-logo img {
		max-height: 50px !important;
		width: auto !important;
		object-fit: contain !important;
		margin-top: 0 !important;
		padding-top: 0 !important;
	}
	
	/* Garantir que o header-row do logo não invada */
	#header.header-effect-shrink.header-shrink .header-container .header-row {
		margin-top: 0 !important;
		padding-top: 0 !important;
		align-items: center !important;
	}
}

/* PADRONIZAÇÃO DO FOOTER */
#footer {
	background-color: var(--color-secondary) !important;
}

#footer .footer-copyright {
	background-color: rgba(0, 0, 0, 0.2) !important;
	border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Linha Divisória do Footer */
.footer-divider {
	width: 100%;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.2);
	margin: 0;
	border: none;
}

/* Parte Inferior do Footer */
.footer-bottom {
	background-color: var(--color-secondary) !important;
	padding: 0;
}

.footer-bottom .container {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

.footer-logo-link {
	display: inline-block;
	transition: opacity 0.3s ease;
}

.footer-logo-link:hover {
	opacity: 0.8;
}

.footer-logo-white {
	transition: all 0.3s ease;
}

.footer-logo-link:hover .footer-logo-white {
	opacity: 0.9;
	transform: scale(1.05);
}

/* Responsividade da parte inferior do footer */
@media (max-width: 767px) {
	.footer-bottom .container {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}
	
	.footer-bottom .col-md-4 {
		text-align: center !important;
		margin-bottom: 1.5rem;
	}
	
	.footer-bottom .col-md-4:last-child {
		margin-bottom: 0;
	}
	
	.footer-logo-white {
		max-width: 150px !important;
	}
}

/* Estilos para banners estáticos nas páginas de planos */
.slider-slide {
	position: relative;
	width: 100%;
	min-height: 380px;
}

.slider-slide .background-image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	z-index: 0;
}

.slider-slide .container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.slider-slide .row {
	position: relative;
	z-index: 3;
}

/* Garantir que textos e botões sejam clicáveis e visíveis */
.slider-slide .appear-animation {
	position: relative;
	z-index: 4;
}

.slider-slide .btn,
.slider-slide a {
	position: relative;
	z-index: 10;
	pointer-events: auto;
}

.slider-slide h1,
.slider-slide h2 {
	position: relative;
	z-index: 5;
}

/* Ajustar SVG para não interferir nos elementos */
.slider-slide .custom-svg-1 {
	z-index: 1 !important;
	pointer-events: none;
}

/* Estilos para o banner estático nas páginas de planos */
.planos-banner-static .background-image-wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
	background-position: center right;
	z-index: 0;
}

.planos-banner-static .container {
	position: relative;
	z-index: 3; /* Garante que o conteúdo esteja acima da imagem */
	min-height: 380px; /* Altura mínima para o banner */
	display: flex;
	align-items: center;
}

.planos-banner-static .custom-svg-1 {
	pointer-events: none; /* Impede que o SVG bloqueie cliques nos botões */
	z-index: 1;
}

.planos-banner-static .row {
	position: relative;
	z-index: 4;
}

.planos-banner-static h1,
.planos-banner-static h2,
.planos-banner-static h3 {
	position: relative;
	z-index: 5;
}

.planos-banner-static .slider-cta-btn {
	z-index: 10; /* Garante que os botões sejam clicáveis */
	position: relative;
}

.planos-banner-static .appear-animation {
	position: relative;
	z-index: 5;
}

@media (min-width: 992px) {
	.planos-banner-static .container {
		min-height: 450px; /* Aumenta a altura em telas maiores */
	}
}


.footer-developed-by {
	margin-left: 15px;
	padding-left: 15px;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.footer-developed-by strong {
	color: #ffffff;
	font-weight: 600;
	font-size: 1.05em;
}

.footer-dev-link {
	color: #FEE044 !important;
	font-weight: 600;
	text-decoration: none;
	font-size: 1.05em;
	transition: all 0.3s ease;
}

.footer-dev-link:hover {
	color: #ffffff !important;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.footer-developed-by {
		display: block;
		margin-left: 0;
		margin-top: 10px;
		padding-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		padding-top: 10px;
	}
}

/* ============================================
   BOTÃO SCROLL TO TOP - PADRONIZAÇÃO
   ============================================ */

/* Estilos para o botão de voltar ao topo */
.scroll-to-top {
	position: fixed;
	bottom: 30px;
	right: 30px;
	width: 50px;
	height: 50px;
	background-color: var(--color-primary) !important;
	color: #ffffff !important;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	z-index: 99999;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(193, 174, 88, 0.4);
	cursor: pointer;
}

.scroll-to-top.visible {
	opacity: 1;
	visibility: visible;
}

.scroll-to-top:hover {
	background-color: var(--color-primary-dark) !important;
	transform: translateY(-5px);
	box-shadow: 0 6px 20px rgba(193, 174, 88, 0.6);
	color: #ffffff !important;
	text-decoration: none;
}

.scroll-to-top:active {
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(193, 174, 88, 0.4);
}

.scroll-to-top i {
	font-size: 20px;
	color: #ffffff !important;
}

/* Esconder no mobile se necessário (pode ser removido se quiser mostrar) */
@media (max-width: 767px) {
	.scroll-to-top.hidden-mobile {
		display: none !important;
	}
	
	.scroll-to-top:not(.hidden-mobile) {
		bottom: 20px;
		right: 20px;
		width: 45px;
		height: 45px;
	}
	
	.scroll-to-top:not(.hidden-mobile) i {
		font-size: 18px;
	}
}

/* Garantir que o botão scroll-to-top fique sempre clicável e visível */
.scroll-to-top {
	z-index: 99999;
}

/* ===== CARROSSEL DE MARCAS ===== */
.section-marcas-carousel {
	background: #1d1d1b !important;
	background-color: #1d1d1b !important;
	overflow: hidden;
}

.carousel-marcas-importe .owl-stage-outer {
	overflow: visible;
	padding: 18px 0 10px;
}

.carousel-marcas-importe.carousel-center-active-item .owl-item {
	opacity: 0.45;
	transform: scale(0.84);
	transition: transform 0.35s ease, opacity 0.35s ease !important;
}

.carousel-marcas-importe.carousel-center-active-item .owl-item.current {
	opacity: 1 !important;
	transform: scale(1.06) !important;
	z-index: 5;
}

.marca-item {
	display: block;
	text-decoration: none;
	text-align: center;
	outline: none;
}

.marca-logo {
	background: #fff;
	border-radius: 8px;
	padding: 10px 8px 7px;
	border: 2px solid transparent;
	box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	line-height: 0;
}

.marca-logo img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.marca-nome {
	display: block;
	color: rgba(255, 255, 255, 0.5);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 9px;
	transition: color 0.3s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.marca-item:hover .marca-logo {
	border-color: #FEE044;
	box-shadow: 0 5px 20px rgba(254, 224, 68, 0.28);
}

.marca-item:hover .marca-nome {
	color: #FEE044;
}

.carousel-marcas-importe .owl-item.current .marca-logo {
	border-color: #FEE044;
	box-shadow: 0 8px 28px rgba(254, 224, 68, 0.22);
}

.carousel-marcas-importe .owl-item.current .marca-nome {
	color: #FEE044;
}

@media (max-width: 991.98px) {
	.section-marcas-carousel {
		overflow-x: hidden;
	}
}

/* ===== CONTRASTE: textos legíveis no carrossel (fundo escuro) ===== */
.section-marcas-carousel h2,
.section-marcas-carousel h3,
.section-marcas-carousel .text-color-light,
.section-marcas-carousel .font-weight-extra-bold {
	color: #ffffff !important;
}

.section-marcas-carousel .text-color-primary,
.section-marcas-carousel [style*="letter-spacing"] {
	color: #FEE044 !important;
}

.section-marcas-carousel .container > p:not([class*="text-color-primary"]):not([style*="FEE044"]) {
	color: rgba(255, 255, 255, 0.65) !important;
}

/* ===== CONTRASTE: seção mapa de montadoras nas LPs ===== */
.lp-mapa-header h2,
.lp-mapa-header h3 {
	color: #ffffff !important;
}

.lp-mapa-header p {
	color: rgba(255, 255, 255, 0.75) !important;
}

/* ===== CONTRASTE LP: seções escuras – headings e parágrafos sempre legíveis ===== */
/* Bootstrap sobrescreve "color: inherit" em h2/h3 com sua própria cor padrão;
   forçamos branco em todos os containers dark das LPs */

/* CTA final */
.lp-cta-final h2,
.lp-cta-final h3,
.lp-cta-final p:not(.btn):not(.lp-btn-whatsapp) {
	color: #ffffff !important;
}

/* Seções escuras genéricas */
.lp-section-dark h2,
.lp-section-dark h3,
.lp-section-dark p:not(.btn):not(.lp-btn-whatsapp),
.lp-section-dark .lp-section-title,
.lp-section-dark .lp-section-subtitle {
	color: #ffffff !important;
}

/* Hero: headings e parágrafo */
.lp-hero h1,
.lp-hero h2,
.lp-hero p:not(.btn) {
	color: #ffffff !important;
}