/* VPN Corporativa - Overrides claros e modernos */

:root {
    --vpn-surface: var(--bg-card);
    --vpn-surface-soft: var(--bg-secondary);
    --vpn-text: var(--text-primary);
    --vpn-muted: var(--text-secondary);
    --vpn-border: var(--border-color);
    --vpn-shadow: var(--shadow-card);
    --vpn-shadow-hover: var(--shadow-card-hover);
}

.modern-hero {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    position: relative;
}

.modern-hero .hero-container {
    max-width: var(--container-max-width) !important;
    margin: 0 auto !important;
    padding: 110px 24px 56px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr) !important;
    gap: 40px !important;
    align-items: center !important;
}

.modern-hero .hero-content {
    position: relative;
    z-index: 2;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
}

.modern-hero .hero-visual {
    justify-content: flex-end !important;
    align-self: center !important;
    margin: 0 !important;
}

.modern-hero .vpn-connection-demo {
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
}

.modern-hero .badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 999px;
    background: var(--primary-lighter);
    border: 1px solid var(--vpn-border);
    color: var(--primary-color);
    font-weight: 600;
}

.modern-hero .hero-title,
.modern-hero .hero-description {
    color: var(--vpn-text) !important;
}

.modern-hero .hero-description {
    color: var(--vpn-muted) !important;
}

.modern-hero .hero-background .bg-gradient {
    background: radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.12), transparent 55%),
                radial-gradient(circle at 80% 70%, rgba(14, 165, 233, 0.10), transparent 55%);
}

.vpn-connection-demo,
.vpn-interface-mockup,
.comparison-card,
.implementation-card,
.timeline-content,
.guarantees-bar,
.feature-card,
.workflow-step,
.tech-info-card,
.pricing-card,
.contact-form-card,
.info-card-new,
.vpn-contact .contact-item,
.vpn-contact .contact-form {
    background: var(--vpn-surface) !important;
    border: 1px solid var(--vpn-border) !important;
    box-shadow: var(--vpn-shadow);
}

.vpn-implementation-section,
.capabilities-section,
.benefits-modern,
.vpn-contact {
    background: var(--bg-secondary) !important;
}

.section-title,
.feature-title,
.comparison-title,
.step-title,
.implementation-card h3,
.timeline-content h3,
.guarantee-text strong,
.tech-info-card h4,
.plan-name,
.amount,
.form-card-header h3,
.info-card-content h4,
.highlight-content h4,
.vpn-contact .contact-details h4 {
    color: var(--vpn-text) !important;
}

.section-description,
.feature-description,
.feature-list li,
.threat-content p,
.step-description,
.implementation-card p,
.progress-label,
.guarantee-text span,
.timeline-content p,
.tech-info-card li,
.plan-description,
.period,
.form-card-header p,
.info-card-content p,
.highlight-content p,
.vpn-contact .contact-details p {
    color: var(--vpn-muted) !important;
}

.feature-icon,
.step-icon,
.guarantee-icon,
.tech-icon,
.info-card-icon {
    background: var(--primary-lighter) !important;
    color: var(--primary-color) !important;
}

.feature-card:hover .feature-icon,
.workflow-step:hover .step-icon,
.guarantee-card:hover .guarantee-icon,
.tech-info-card:hover .tech-icon {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.vpn-contact .contact-icon {
    background: var(--primary-lighter) !important;
    border: 1px solid var(--vpn-border) !important;
}

.vpn-contact .contact-icon i {
    color: var(--primary-color) !important;
}

.vpn-contact .form-group input,
.vpn-contact .form-group select,
.vpn-contact .form-group textarea,
.form-group-new input,
.form-group-new select,
.form-group-new textarea {
    background: var(--vpn-surface-soft) !important;
    border: 1px solid var(--vpn-border) !important;
    color: var(--vpn-text) !important;
}

.vpn-contact .form-group label {
    background: var(--vpn-surface-soft) !important;
    color: var(--vpn-muted) !important;
}

.vpn-contact .form-group input:focus,
.vpn-contact .form-group select:focus,
.vpn-contact .form-group textarea:focus,
.form-group-new input:focus,
.form-group-new select:focus,
.form-group-new textarea:focus {
    border-color: var(--primary-color) !important;
    background: var(--vpn-surface) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12) !important;
}

.node-label,
.mockup-title,
.connection-status h3,
.info-value,
.stat-value {
    color: var(--vpn-text) !important;
}

.node-status.secure,
.node-status.protected,
.node-status.online {
    background: var(--primary-lighter) !important;
    border-color: rgba(99, 102, 241, 0.25) !important;
    color: var(--primary-color) !important;
}

.node-status.secure::before,
.node-status.protected::before,
.node-status.online::before {
    background: var(--primary-color) !important;
}

.vpn-connection-demo .node-icon,
.vpn-server .node-icon,
.marker-icon,
.step-number,
.card-timeline-dot,
.guarantee-icon-small,
.header-icon,
.plan-btn,
.form-submit-btn,
.vpn-contact button[type="submit"] {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.vpn-connection-demo .node-icon,
.vpn-server .node-icon,
.marker-icon,
.step-number,
.card-timeline-dot,
.guarantee-icon-small,
.header-icon {
    box-shadow: 0 10px 30px rgba(99, 102, 241, 0.22) !important;
}

.comparison-card:hover,
.implementation-card:hover,
.timeline-content:hover,
.feature-card:hover,
.workflow-step:hover,
.tech-info-card:hover,
.pricing-card:hover,
.info-card-new:hover,
.vpn-contact .contact-item:hover,
.vpn-contact .contact-form:hover {
    border-color: var(--primary-color) !important;
    box-shadow: var(--vpn-shadow-hover) !important;
}

@media (max-width: 968px) {
    .modern-hero .hero-container {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
        padding: 96px 16px 36px !important;
    }

    .modern-hero .hero-content {
        text-align: center !important;
    }

    .modern-hero .hero-actions {
        justify-content: center !important;
    }

    .modern-hero .hero-visual {
        justify-content: center !important;
    }

    .modern-hero .hero-title {
        font-size: clamp(2rem, 8vw, 2.8rem);
    }

    .vpn-connection-demo {
        padding: 28px 16px !important;
    }
}