/**
 * Padronização de Cores OnCabo - Versão Corrigida
 * Azul: #0c3c6c | Verde: #13fa1c
 * REGRAS:
 * - Azul e branco dominante
 * - Verde APENAS em texto escuro ou glows
 * - NUNCA verde com branco
 * - NUNCA tons escuros sobre escuros
 */

/* ========================================
   BOTÕES PRIMÁRIOS - AZUL SÓLIDO
   ======================================== */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.plano-cta,
.btn-contratar,
input[type="submit"],
button[type="submit"] {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-primary) !important;
    font-weight: 600 !important;
    box-shadow: var(--shadow-primary) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover,
.plano-cta:hover,
.btn-contratar:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background: var(--oncabo-primary-hover) !important;
    border-color: var(--oncabo-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: var(--shadow-primary-hover) !important;
}

/* ========================================
   BOTÕES OUTLINE - BRANCO COM BORDA AZUL
   ======================================== */
.btn-outline,
.btn.btn-outline {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-primary) !important;
    color: var(--oncabo-primary) !important;
    font-weight: 600 !important;
}

.btn-outline:hover,
.btn.btn-outline:hover {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
    transform: translateY(-2px) !important;
}

/* ========================================
   DESTAQUE/HIGHLIGHT - VERDE VIBRANTE
   APENAS EM FUNDOS ESCUROS OU TEXTO ESCURO
   ======================================== */
.highlight,
span.highlight,
.text-accent {
    color: var(--oncabo-green) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 20px rgba(19, 250, 28, 0.4);
    /* Verde brilha contra fundo escuro */
}

/* ========================================
   NAVEGAÇÃO/MENU - LIMPO E CLARO
   ======================================== */
.site-header {
    background: var(--oncabo-white) !important;
    border-bottom: 1px solid var(--oncabo-gray-200) !important;
}

.nav-link {
    color: var(--oncabo-gray-700) !important;
    transition: color 0.3s ease !important;
}

.nav-link:hover,
.nav-link.active,
.menu-item.current-menu-item a,
.menu-item:hover > a {
    color: var(--oncabo-primary) !important;
}

/* Underline verde no hover */
.nav-link::after,
.menu-item a::after {
    background-color: var(--oncabo-green) !important;
}

/* ========================================
   HERO SLIDER - AZUL COM TEXTO BRANCO
   ======================================== */
.hero-slider {
    background: var(--gradient-primary) !important;
}

.hero-slider .slide {
    background: var(--gradient-primary-overlay) !important;
}

.hero-slider h1,
.hero-slider .slide-subtitle,
.hero-slider p {
    color: var(--oncabo-white) !important;
}

/* Verde brilha no fundo azul escuro */
.hero-slider .highlight {
    color: var(--oncabo-green) !important;
    text-shadow: 0 0 25px rgba(19, 250, 28, 0.5) !important;
}

/* Dots - Branco transparente, verde quando ativo */
.hero-slider .slider-dots .dot {
    background: rgba(255, 255, 255, 0.3) !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.hero-slider .slider-dots .dot.active {
    background: var(--oncabo-green) !important;
    border-color: var(--oncabo-green) !important;
    box-shadow: 0 0 20px rgba(19, 250, 28, 0.8) !important;
}

/* Setas - Branco transparente */
.hero-slider .slider-prev,
.hero-slider .slider-next {
    background: rgba(255, 255, 255, 0.2) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    color: var(--oncabo-white) !important;
    backdrop-filter: blur(10px);
}

.hero-slider .slider-prev:hover,
.hero-slider .slider-next:hover {
    background: var(--oncabo-white) !important;
    color: var(--oncabo-primary) !important;
    border-color: var(--oncabo-white) !important;
}

/* ========================================
   ESTATÍSTICAS - BRANCO LIMPO
   ======================================== */
.stats-section {
    background: var(--oncabo-white) !important;
}

.stat-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-gray-200) !important;
    transition: all 0.3s ease !important;
}

.stat-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 4px 20px rgba(12, 60, 108, 0.15) !important;
    transform: translateY(-3px) !important;
}

.stat-icon {
    color: var(--oncabo-primary) !important;
}

.stat-number {
    color: var(--oncabo-primary) !important;
    font-weight: 800 !important;
}

.stat-label {
    color: var(--oncabo-gray-600) !important;
}

/* ========================================
   SERVIÇOS - AZUL CLARO COM CARDS BRANCOS
   ======================================== */
.services-section {
    background: var(--oncabo-primary-lighter) !important;
}

.service-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-white) !important;
}

.service-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
    transform: translateY(-5px) !important;
}

.service-image svg,
.service-icon {
    color: var(--oncabo-primary) !important;
}

.service-title {
    color: var(--oncabo-primary) !important;
}

.service-link {
    color: var(--oncabo-primary) !important;
    font-weight: 600 !important;
}

.service-link:hover {
    color: var(--oncabo-primary-hover) !important;
}

/* Divider verde */
.service-divider {
    background: var(--oncabo-green) !important;
}

/* ========================================
   PLANOS - BRANCOS COM AZUL E VERDE
   ======================================== */
.planos-section {
    background: var(--oncabo-white) !important;
}

.plano-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-gray-200) !important;
}

.plano-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
    transform: translateY(-5px) !important;
}

/* Card "Mais Popular" - Azul */
.plano-card.popular {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 0 0 4px rgba(12, 60, 108, 0.1), 0 8px 30px rgba(12, 60, 108, 0.2) !important;
}

.plano-card.popular .plano-badge {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
    font-weight: 700 !important;
}

/* Ícone - Azul */
.plano-icon svg {
    color: var(--oncabo-primary) !important;
}

/* Velocidade - Azul */
.plano-velocidade,
.velocidade-numero {
    color: var(--oncabo-primary) !important;
    font-weight: 900 !important;
}

/* Benefícios - Checkmarks VERDES (ícone pequeno, OK) */
.plano-beneficios li {
    color: var(--oncabo-gray-700) !important;
}

.plano-beneficios li svg,
.plano-beneficios li::before {
    color: var(--oncabo-green) !important;
}

/* ========================================
   PLANOS CORPORATIVOS - FUNDO AZUL MÉDIO (NÃO MUITO ESCURO)
   ======================================== */
.corporativo-section,
.planos-section.corporativo-section {
    background: var(--oncabo-primary) !important;
    /* Azul médio, não muito escuro */
}

.corporativo-section .section-title,
.corporativo-section .section-subtitle,
.corporativo-section h2,
.corporativo-section h3 {
    color: var(--oncabo-white) !important;
}

.corporativo-section .section-subtitle,
.corporativo-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Cards com fundo azul mais claro */
.corporativo-section .plano-card {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px);
}

.corporativo-section .plano-card:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2) !important;
}

.corporativo-section .plano-nome,
.corporativo-section .plano-velocidade,
.corporativo-section .velocidade-numero,
.corporativo-section .preco-valor,
.corporativo-section .plano-beneficios li {
    color: var(--oncabo-white) !important;
}

/* Checkmarks verdes brilham no fundo azul */
.corporativo-section .plano-beneficios li svg,
.corporativo-section .plano-beneficios li::before {
    color: var(--oncabo-green) !important;
    filter: drop-shadow(0 0 8px rgba(19, 250, 28, 0.5));
}

/* ========================================
   SVAs - AZUL CLARO COM CARDS BRANCOS
   ======================================== */
.svas-section {
    background: var(--oncabo-primary-lighter) !important;
}

.sva-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-white) !important;
}

.sva-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
    transform: translateY(-5px) !important;
}

/* ========================================
   COMBOS - BRANCO
   ======================================== */
.combo-section {
    background: var(--oncabo-white) !important;
}

.combo-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-gray-200) !important;
}

.combo-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
}

/* Badge com fundo azul, texto branco */
.combo-badge {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
    font-weight: 700 !important;
}

/* ========================================
   AUTOATENDIMENTO - AZUL CLARO
   ======================================== */
.autoatendimento-section {
    background: var(--oncabo-primary-lighter) !important;
}

.auto-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-white) !important;
}

.auto-card:hover {
    border-color: var(--oncabo-primary) !important;
    transform: translateY(-3px) !important;
}

.auto-icon {
    color: var(--oncabo-primary) !important;
}

/* ========================================
   FAQ - BRANCO
   ======================================== */
.faq-section {
    background: var(--oncabo-white) !important;
}

.faq-item {
    border: 2px solid var(--oncabo-gray-200) !important;
    background: var(--oncabo-white) !important;
}

.faq-item.active {
    border-color: var(--oncabo-primary) !important;
}

.faq-item.active .faq-question {
    background: var(--oncabo-primary-lighter) !important;
    color: var(--oncabo-primary) !important;
}

.faq-icon {
    color: var(--oncabo-primary) !important;
}

.faq-icon.active {
    color: var(--oncabo-green) !important;
}

/* ========================================
   APP SECTION - AZUL CLARO
   ======================================== */
.app-section {
    background: var(--oncabo-primary-lighter) !important;
}

.app-feature-icon {
    color: var(--oncabo-primary) !important;
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-primary-lighter) !important;
}

.app-download-btn {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-primary) !important;
}

.app-download-btn:hover {
    background: var(--oncabo-white) !important;
    color: var(--oncabo-primary) !important;
    border-color: var(--oncabo-primary) !important;
}

/* ========================================
   BENEFÍCIOS - BRANCO
   ======================================== */
.beneficios-section {
    background: var(--oncabo-white) !important;
}

.beneficio-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-gray-200) !important;
}

.beneficio-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
    transform: translateY(-5px) !important;
}

.beneficio-icon {
    background: var(--oncabo-primary-lighter) !important;
    color: var(--oncabo-primary) !important;
}

.beneficio-title {
    color: var(--oncabo-primary) !important;
}

/* ========================================
   DEPOIMENTOS - AZUL CLARO
   ======================================== */
.depoimentos-section {
    background: var(--oncabo-primary-lighter) !important;
}

.depoimento-card {
    background: var(--oncabo-white) !important;
    border: 2px solid var(--oncabo-white) !important;
}

.depoimento-card:hover {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
}

/* Aspas verdes (pequeno detalhe, OK) */
.depoimento-aspas {
    color: var(--oncabo-green) !important;
    text-shadow: 0 0 20px rgba(19, 250, 28, 0.4);
}

/* Estrelas douradas */
.depoimento-rating .star.filled {
    color: #F59E0B !important;
}

/* ========================================
   COBERTURA - BRANCO
   ======================================== */
.cobertura-section {
    background: var(--oncabo-white) !important;
}

.cobertura-form input {
    border: 2px solid var(--oncabo-gray-300) !important;
}

.cobertura-form input:focus {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 0 0 3px rgba(12, 60, 108, 0.1) !important;
}

/* ========================================
   FOOTER - AZUL MÉDIO (NÃO MUITO ESCURO)
   ======================================== */
.site-footer {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
}

.footer-title {
    color: var(--oncabo-white) !important;
}

.footer-link {
    color: rgba(255, 255, 255, 0.85) !important;
}

.footer-link:hover {
    color: var(--oncabo-white) !important;
}

.footer-social-link {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--oncabo-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
}

.footer-social-link:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
}

/* ========================================
   FORMULÁRIOS - AZUL NO FOCUS
   ======================================== */
input,
textarea,
select {
    border-color: var(--oncabo-gray-300) !important;
    transition: all 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--oncabo-primary) !important;
    box-shadow: 0 0 0 3px rgba(12, 60, 108, 0.1) !important;
    outline: none !important;
}

/* ========================================
   LINKS GERAIS - AZUL
   ======================================== */
a:not(.btn):not(.nav-link) {
    color: var(--oncabo-primary) !important;
}

a:not(.btn):not(.nav-link):hover {
    color: var(--oncabo-primary-hover) !important;
}

/* ========================================
   SEÇÕES COM TÍTULOS
   ======================================== */
.section-title {
    color: var(--oncabo-gray-900) !important;
}

/* Verde apenas em highlights (palavras isoladas) */
.section-title .highlight {
    color: var(--oncabo-green) !important;
    font-weight: 800 !important;
}

.section-subtitle {
    color: var(--oncabo-gray-600) !important;
}

/* ========================================
   BADGES/TAGS - AZUL
   ======================================== */
.badge,
.tag {
    background: var(--oncabo-primary) !important;
    color: var(--oncabo-white) !important;
    font-weight: 600 !important;
}

/* ========================================
   WHATSAPP BUTTON - VERDE WHATSAPP
   ======================================== */
.whatsapp-button,
.btn-whatsapp {
    background: #25D366 !important;
    color: var(--oncabo-white) !important;
}

.whatsapp-button:hover,
.btn-whatsapp:hover {
    background: #128C7E !important;
}

/* ========================================
   SCROLLBAR - AZUL
   ======================================== */
::-webkit-scrollbar-thumb {
    background: var(--oncabo-primary) !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--oncabo-primary-hover) !important;
}

/* ========================================
   SELEÇÃO DE TEXTO - AZUL CLARO
   ======================================== */
::selection {
    background: var(--oncabo-primary-lighter) !important;
    color: var(--oncabo-primary) !important;
}

::-moz-selection {
    background: var(--oncabo-primary-lighter) !important;
    color: var(--oncabo-primary) !important;
}

/* ========================================
   ACESSIBILIDADE - FOCUS AZUL
   ======================================== */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 3px solid var(--oncabo-primary) !important;
    outline-offset: 2px;
}

/* ========================================
   RESPONSIVIDADE
   ======================================== */
@media (max-width: 768px) {
    .plano-card,
    .service-card,
    .beneficio-card {
        margin-bottom: 1.5rem;
    }
}

/* ========================================
   ALTO CONTRASTE (acessibilidade)
   ======================================== */
@media (prefers-contrast: high) {
    .btn-primary,
    .btn.btn-primary {
        border-width: 3px !important;
    }

    .highlight {
        text-decoration: underline;
        text-decoration-thickness: 2px;
    }
}