/**
 * Correção de Ícones e Usabilidade dos Planos - OnCabo
 * Cores EXATAS: Azul #0c3c6c | Verde #13fa1c
 */

/* ===================================
   ÍCONES DOS PLANOS - VISIBILIDADE E CORES
   =================================== */

/* Ícone principal do plano (círculo com SVG) */
.plano-icon {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(12, 60, 108, 0.1) !important;
    /* Fundo azul claro para destacar */
    border-radius: 50% !important;
    padding: 16px !important;
    transition: all 0.3s ease !important;
}

/* SVG dentro do ícone do plano - AZUL */
.plano-icon svg {
    width: 48px !important;
    height: 48px !important;
    color: #0c3c6c !important;
    /* Azul EXATO da logo */
    stroke: #0c3c6c !important;
    fill: none !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

/* Hover no card aumenta o ícone */
.plano-card:hover .plano-icon {
    transform: scale(1.1) rotate(5deg) !important;
    background: rgba(12, 60, 108, 0.15) !important;
}

.plano-card:hover .plano-icon svg {
    color: #094061 !important;
    stroke: #094061 !important;
}

/* ===================================
   ÍCONES DOS BENEFÍCIOS (SVG INLINE)
   =================================== */

/* Ícones SVG inline nos benefícios - VERDE */
.plano-beneficios li svg {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    flex-shrink: 0 !important;
    color: #13fa1c !important;
    /* Verde EXATO da logo */
    stroke: #13fa1c !important;
    fill: none !important;
    stroke-width: 2.5 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    margin-right: 8px !important;
}

/* Se não tiver SVG, usar checkmark padrão */
.plano-beneficios li::before {
    display: none !important;
    /* Remove o ::before quando tem SVG */
}

.plano-beneficios li:not(:has(svg))::before {
    content: '✓' !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    background: #13fa1c !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    margin-right: 8px !important;
    flex-shrink: 0 !important;
}

/* ===================================
   PLANOS RESIDENCIAIS - FUNDO BRANCO
   =================================== */

.planos-section:not(.corporativo-section) .plano-card {
    background: #ffffff !important;
    border: 2px solid #E5E7EB !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

.planos-section:not(.corporativo-section) .plano-card:hover {
    border-color: #0c3c6c !important;
    box-shadow: 0 8px 30px rgba(12, 60, 108, 0.15) !important;
}

/* Card Mais Popular */
.planos-section:not(.corporativo-section) .plano-card.popular {
    border-color: #0c3c6c !important;
    box-shadow: 0 0 0 4px rgba(12, 60, 108, 0.1), 0 8px 30px rgba(12, 60, 108, 0.2) !important;
}

/* Badge Mais Popular - AZUL */
.planos-section:not(.corporativo-section) .plano-badge {
    background: #0c3c6c !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 12px rgba(12, 60, 108, 0.4) !important;
}

/* Velocidade - AZUL */
.planos-section:not(.corporativo-section) .velocidade-numero {
    color: #0c3c6c !important;
    font-weight: 900 !important;
    font-size: 4rem !important;
    line-height: 1 !important;
}

.planos-section:not(.corporativo-section) .velocidade-unidade {
    color: #0c3c6c !important;
    font-weight: 700 !important;
}

/* ===================================
   PLANOS CORPORATIVOS - USABILIDADE MELHORADA
   =================================== */

/* Seção corporativa com azul médio (NÃO muito escuro) */
.corporativo-section,
.planos-section.corporativo-section {
    background: linear-gradient(135deg, #0c3c6c 0%, #094061 100%) !important;
    padding: 80px 0 !important;
    position: relative !important;
}

/* Overlay sutil para melhorar legibilidade */
.corporativo-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
}

/* Título da seção - BRANCO */
.corporativo-section .section-title,
.corporativo-section h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.corporativo-section .section-subtitle,
.corporativo-section .section-header p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-size: 1.125rem !important;
}

/* Cards corporativos com fundo BRANCO */
.corporativo-section .plano-card {
    background: #ffffff !important;
    border: 2px solid #E5E7EB !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
}

.corporativo-section .plano-card:hover {
    background: #ffffff !important;
    border-color: #0c3c6c !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-8px) !important;
}

/* Card Mais Vendido/Popular */
.corporativo-section .plano-card.popular {
    border-color: #0c3c6c !important;
    box-shadow: 0 0 0 4px rgba(12, 60, 108, 0.1), 0 12px 48px rgba(0, 0, 0, 0.3) !important;
}

/* Badge corporativo - AZUL */
.corporativo-section .plano-badge {
    background: #0c3c6c !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    box-shadow: 0 4px 12px rgba(12, 60, 108, 0.4) !important;
}

/* Ícone do plano corporativo - AZUL */
.corporativo-section .plano-icon {
    background: rgba(12, 60, 108, 0.1) !important;
    border: none !important;
}

.corporativo-section .plano-icon svg {
    color: #0c3c6c !important;
    stroke: #0c3c6c !important;
    filter: none !important;
}

.corporativo-section .plano-card:hover .plano-icon {
    background: rgba(12, 60, 108, 0.15) !important;
}

.corporativo-section .plano-card:hover .plano-icon svg {
    color: #094061 !important;
    stroke: #094061 !important;
}

/* Textos corporativos - CINZA ESCURO */
.corporativo-section .plano-nome,
.corporativo-section .plano-header p {
    color: #6B7280 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.corporativo-section .velocidade-numero {
    color: #0c3c6c !important;
    font-weight: 900 !important;
    text-shadow: none !important;
}

.corporativo-section .velocidade-unidade {
    color: #0c3c6c !important;
    font-weight: 700 !important;
}

/* Preço corporativo - DESTAQUE */
.corporativo-section .preco-destaque {
    background: transparent !important;
    border: none !important;
    padding: 16px 0 !important;
}

.corporativo-section .preco-cifrao,
.corporativo-section .preco-periodo {
    color: #6B7280 !important;
    font-weight: 600 !important;
}

.corporativo-section .preco-valor {
    color: #111827 !important;
    font-weight: 800 !important;
}

/* Benefícios corporativos - CINZA ESCURO */
.corporativo-section .plano-beneficios li {
    color: #374151 !important;
    font-size: 0.938rem !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid #F3F4F6 !important;
}

.corporativo-section .plano-beneficios li:last-child {
    border-bottom: none !important;
}

/* Ícones dos benefícios corporativos - VERDE */
.corporativo-section .plano-beneficios li svg {
    color: #13fa1c !important;
    stroke: #13fa1c !important;
    filter: none !important;
}

/* Checkmarks corporativos - VERDE */
.corporativo-section .plano-beneficios li:not(:has(svg))::before {
    background: #13fa1c !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* Botão corporativo - AZUL */
.corporativo-section .plano-cta {
    background: #0c3c6c !important;
    color: #ffffff !important;
    border: 2px solid #0c3c6c !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(12, 60, 108, 0.3) !important;
}

.corporativo-section .plano-cta:hover {
    background: #094061 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(12, 60, 108, 0.4) !important;
}

/* ===================================
   PLANO PREMIUM - CORES ONCABO
   =================================== */

/* Plano Premium com cores OnCabo */
.plano-card.gaming {
    border-color: #13fa1c !important;
}

.plano-card.gaming .plano-icon {
    background: rgba(19, 250, 28, 0.1) !important;
}

.plano-card.gaming .plano-icon svg {
    color: #13fa1c !important;
    stroke: #13fa1c !important;
}

.plano-card.gaming .gaming-badge {
    background: linear-gradient(135deg, #13fa1c 0%, #10d118 100%) !important;
    color: #111827 !important;
    font-weight: 700;
}

.plano-card.gaming .plano-beneficios li svg {
    color: #13fa1c !important;
    stroke: #13fa1c !important;
}

/* ===================================
   RESPONSIVIDADE
   =================================== */

@media (max-width: 768px) {
    .plano-icon {
        width: 64px !important;
        height: 64px !important;
        padding: 12px !important;
    }

    .plano-icon svg {
        width: 40px !important;
        height: 40px !important;
    }

    .plano-beneficios li svg {
        width: 18px !important;
        height: 18px !important;
    }

    .corporativo-section {
        padding: 60px 0 !important;
    }

    .velocidade-numero {
        font-size: 3rem !important;
    }
}

@media (max-width: 480px) {
    .plano-icon {
        width: 56px !important;
        height: 56px !important;
    }

    .plano-icon svg {
        width: 32px !important;
        height: 32px !important;
    }

    .velocidade-numero {
        font-size: 2.5rem !important;
    }
}

/* ===================================
   GARANTIR PRIORIDADE (IMPORTANTE)
   =================================== */

/* Força aplicação das cores corretas */
body .plano-icon svg {
    color: #0c3c6c !important;
    stroke: #0c3c6c !important;
}

body .corporativo-section .plano-icon svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

body .plano-beneficios li svg {
    color: #13fa1c !important;
    stroke: #13fa1c !important;
}

body .plano-card.gaming .plano-icon svg,
body .plano-card.gaming .plano-beneficios li svg {
    color: #13fa1c !important;
    stroke: #13fa1c !important;
}