/**
 * Gradientes Azul OnCabo
 * Tons: #011a43, #01207b, #0026c7, #011c78
 * Aplicação em todos os elementos azuis do site
 */

:root {
    /* Novos tons de azul OnCabo */
    --oncabo-blue-1: #011a43;
    --oncabo-blue-2: #01207b;
    --oncabo-blue-3: #0026c7;
    --oncabo-blue-4: #011c78;

    /* Gradientes principais */
    --gradient-primary: linear-gradient(135deg, #011a43 0%, #01207b 50%, #0026c7 100%);
    --gradient-primary-alt: linear-gradient(135deg, #01207b 0%, #0026c7 100%);
    --gradient-primary-dark: linear-gradient(135deg, #011a43 0%, #011c78 100%);
    --gradient-primary-light: linear-gradient(135deg, #0026c7 0%, #01207b 100%);
    --gradient-hover: linear-gradient(135deg, #011c78 0%, #011a43 100%);
    --gradient-vertical: linear-gradient(180deg, #011a43 0%, #01207b 50%, #0026c7 100%);
    --gradient-diagonal: linear-gradient(45deg, #011a43 0%, #01207b 35%, #0026c7 70%, #011c78 100%);
}

/* ===================================
   BOTÕES COM GRADIENTE SUTIL E PROFISSIONAL
   =================================== */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
.plano-cta,
.btn-contratar,
input[type="submit"],
button[type="submit"] {
    background: linear-gradient(180deg, #01207b 0%, #011c78 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(1, 32, 123, 0.25) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(180deg, #0026c7 0%, #01207b 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 38, 199, 0.35) !important;
}

/* ===================================
   HEADER - FUNDO BRANCO, TEXTOS GRADIENTE
   =================================== */
.site-header,
header.site-header {
    background: #ffffff !important;
}

.site-header .site-title,
.site-header .site-title a,
.site-header h1,
.site-header .main-nav a,
.site-header nav a:not(.btn):not(.btn-primary) {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

.site-header .main-nav a:hover:not(.btn):not(.btn-primary) {
    background: var(--gradient-hover);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Botões no header - letras brancas e gradiente sutil */
.site-header .btn,
.site-header .btn-primary,
.site-header button.btn-primary,
.site-header a.btn-primary {
    background: linear-gradient(180deg, #01207b 0%, #011c78 100%) !important;
    color: #ffffff !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
}

.site-header .btn:hover,
.site-header .btn-primary:hover {
    background: linear-gradient(180deg, #0026c7 0%, #01207b 100%) !important;
    color: #ffffff !important;
}

/* ===================================
   FOOTER - MANTER FUNDO AZUL ESCURO
   =================================== */
.site-footer,
footer.site-footer {
    background: #0F172A !important;
}

/* ===================================
   SEÇÕES - MANTER FUNDOS AZUIS SÓLIDOS
   =================================== */
/* NÃO alterar fundos, apenas textos e ícones */

/* ===================================
   SEÇÃO APLICATIVO - FUNDO BRANCO, DETALHES AZUIS
   =================================== */
.app-section,
section#app,
section.app-section {
    background: #ffffff !important;
}

.app-section .section-title,
.app-section h2,
.app-section h3,
.app-section .app-feature-content h3 {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

.app-section .section-subtitle,
.app-section p,
.app-section .app-feature-content p {
    color: #374151 !important;
}

.app-feature-icon {
    background: linear-gradient(135deg, #0026c7 0%, #01207b 100%) !important;
}

.app-feature-icon svg {
    color: #ffffff !important;
}

.app-section .app-content {
    background: #ffffff !important;
}

/* Botões de download na seção app */
.app-section .store-button {
    background: linear-gradient(180deg, #01207b 0%, #011c78 100%) !important;
    color: #ffffff !important;
}

.app-section .store-button:hover {
    background: linear-gradient(180deg, #0026c7 0%, #01207b 100%) !important;
}

/* ===================================
   CARDS COM BORDA GRADIENTE
   =================================== */
.plano-card.popular {
    border-image: linear-gradient(135deg, #01207b, #0026c7) 1 !important;
}

.plano-card {
    position: relative;
}

.plano-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: var(--gradient-primary);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.plano-card:hover::before {
    opacity: 1;
}

/* ===================================
   BADGES/ETIQUETAS COM GRADIENTE SUTIL
   =================================== */
.plano-badge {
    background: linear-gradient(135deg, #01207b 0%, #0026c7 100%) !important;
    color: #ffffff !important;
}

/* ===================================
   ÍCONES DOS PLANOS - GRADIENTE SUTIL OU BRANCO
   =================================== */
/* Fundos claros - ícones com fundo gradiente suave */
.plano-card .plano-icon {
    background: linear-gradient(135deg, #0026c7 0%, #01207b 100%) !important;
}

.plano-card .plano-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* Ícones em listas - gradiente em fundos claros */
.plano-beneficios li svg,
.service-features li svg,
.combo-features li svg {
    color: #01207b !important;
    stroke: #01207b !important;
}

/* SVGs em fundos escuros - brancos */
.site-footer svg,
.hero-section svg,
.corporativo-section svg,
section[style*="background: linear-gradient(135deg, #0F172A"] svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ===================================
   TÍTULOS COM DESTAQUE (HIGHLIGHT)
   =================================== */
.highlight,
span.highlight {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800 !important;
}

/* ===================================
   TÍTULOS E TEXTOS AZUIS - GRADIENTE
   =================================== */
.section-title,
h2.section-title,
.plano-nome,
.service-title,
.combo-title {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Fundos claros - títulos com gradiente */
.plano-card .plano-nome,
.service-card .service-title,
.combo-card .combo-title,
.beneficio-card .beneficio-titulo {
    background: var(--gradient-primary) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Fundos escuros - títulos brancos */
.site-footer .section-title,
.hero-section .section-title,
.corporativo-section .section-title,
section[style*="background: linear-gradient(135deg, #0F172A"] .section-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #ffffff !important;
    background-clip: unset !important;
    color: #ffffff !important;
}

/* ===================================
   MOCKUP DO TELEFONE
   =================================== */
.phone-mockup {
    background: var(--gradient-primary-dark) !important;
}

.phone-screen {
    background: var(--gradient-vertical) !important;
}

/* ===================================
   LINKS E HOVER STATES
   =================================== */
a:hover {
    color: #0026c7;
}

/* ===================================
   PROGRESS BARS / LOADERS
   =================================== */
.progress-bar,
.loader {
    background: var(--gradient-primary) !important;
}

/* ===================================
   INPUTS FOCUS
   =================================== */
input:focus,
textarea:focus,
select:focus {
    border-color: #0026c7 !important;
    box-shadow: 0 0 0 3px rgba(0, 38, 199, 0.1) !important;
}

/* ===================================
   BOTÃO WHATSAPP
   =================================== */
.whatsapp-button {
    background: linear-gradient(180deg, #01207b 0%, #011c78 100%) !important;
}

.whatsapp-button:hover {
    background: linear-gradient(180deg, #0026c7 0%, #01207b 100%) !important;
}

/* ===================================
   SEÇÃO DE ESTATÍSTICAS - MANTER FUNDO
   =================================== */
/* NÃO alterar fundo */

.stat-card .stat-number {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-icon svg {
    color: #01207b !important;
}

/* ===================================
   NAVEGAÇÃO
   =================================== */
.main-nav a:hover,
.main-nav a.active {
    color: #0026c7 !important;
}

/* ===================================
   SLIDER / CAROUSEL - MANTER FUNDO ORIGINAL
   =================================== */
/* NÃO alterar fundo do slider */

.slide h1,
.slide h2,
.slide .slide-title {
    color: #ffffff !important;
}

.slide .highlight {
    background: var(--oncabo-green);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================================
   ACESSIBILIDADE
   =================================== */
.accessibility-button {
    background: linear-gradient(180deg, #01207b 0%, #011c78 100%) !important;
}

.control-toggle {
    background: linear-gradient(135deg, #01207b 0%, #0026c7 100%) !important;
}

/* ===================================
   ANIMAÇÕES E EFEITOS
   =================================== */
@keyframes gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.gradient-animated {
    background-size: 200% 200%;
    animation: gradient-shift 10s ease infinite;
}

/* ===================================
   COMBOS
   =================================== */
.combo-icon {
    background: linear-gradient(135deg, #0026c7 0%, #01207b 100%) !important;
}

/* ===================================
   CARDS DE SERVIÇOS
   =================================== */
.service-card .service-icon svg,
.service-image svg {
    color: #01207b !important;
    stroke: #01207b !important;
}

/* ===================================
   LINKS E TEXTOS AZUIS
   =================================== */
/* Links em fundos claros */
a[style*="color: #0c3c6c"],
a[style*="color: #1A3A5C"],
.text-primary,
.link-primary {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================================
   PREÇOS E VALORES
   =================================== */
.preco-valor,
.price-value {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================================
   VELOCIDADE DOS PLANOS
   =================================== */
.velocidade-numero,
.plano-velocidade {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===================================
   RESPONSIVIDADE - MANTER GRADIENTES
   =================================== */
@media (max-width: 768px) {
    .site-header,
    .site-footer,
    .hero-section,
    .slide {
        background-size: cover !important;
        background-position: center !important;
    }
}