/* ===================================================
       VARIÁVEIS DE CORES E ESTILOS (Identidade MWX)
       =================================================== */
            :root {
              --mwx-primary: #0f172a;
              /* Tom escuro para títulos */
              --mwx-subtitle: #475569;
              /* Cor dos textos de apoio */
              --mwx-bg-section: #f8fafc;
              /* Fundo suave da seção */
              --mwx-bg-card: #ffffff;
              /* Fundo branco dos cards */
              --mwx-border-card: #e2e8f0;
              /* Borda sutil dos cards */

              /* Card Negativo / Status Quo */
              --mwx-danger: #ef4444;
              /* Vermelho para ícones X */
              --mwx-danger-bg: #fef2f2;
              /* Fundo do círculo do X */

              /* Card Positivo / Modelo MWX */
              --mwx-accent: #2563eb;
              /* Azul principal da MWX */
              --mwx-success: #22c55e;
              /* Verde para ícones Check */
              --mwx-success-bg: #dcfce7;
              /* Fundo do círculo do Check */
            }

            /* ===================================================
       ESTILOS GERAIS DA SEÇÃO
       =================================================== */
            .mwx-comparison-section {
              background-color: var(--mwx-bg-section);
              font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            }

            .comparison-title {
              color: var(--mwx-primary);
              font-size: 2.25rem;
              letter-spacing: -0.5px;
            }

            /* ===================================================
       CARDS COMPARATIVOS
       =================================================== */
            .comparison-card {
              background-color: var(--mwx-bg-card);
              border: 1px solid var(--mwx-border-card);
              border-radius: 20px;
              padding: 36px 32px;
              height: 100%;
              position: relative;
              transition: transform 0.3s ease, box-shadow 0.3s ease;
            }

            /* Destaque para o Card Recomendado (MWX) */
            .comparison-card.recommended {
              border: 2px solid var(--mwx-accent);
              box-shadow: 0 12px 30px rgba(37, 99, 235, 0.1) !important;
            }

            .comparison-card:hover {
              transform: translateY(-5px);
            }

            /* Badge "Recomendado" */
            .badge-recommended {
              position: absolute;
              top: -14px;
              right: 28px;
              background-color: var(--mwx-accent);
              color: #ffffff;
              font-size: 0.8rem;
              font-weight: 700;
              padding: 6px 16px;
              border-radius: 20px;
              text-transform: uppercase;
              letter-spacing: 0.5px;
            }

            .card-header-title {
              color: var(--mwx-primary);
              font-size: 1.4rem;
              margin-bottom: 24px;
              padding-bottom: 16px;
              border-bottom: 1px solid var(--mwx-border-card);
            }

            /* Lista de Itens */
            .comparison-list {
              list-style: none;
              padding: 0;
              margin: 0;
              display: flex;
              flex-direction: column;
              gap: 18px;
            }

            .comparison-item {
              display: flex;
              align-items: flex-start;
              gap: 14px;
              color: var(--mwx-subtitle);
              font-size: 1rem;
              line-height: 1.5;
            }

            /* Ícones (Círculos) */
            .icon-box {
              width: 28px;
              height: 28px;
              min-width: 28px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-top: 2px;
            }

            .icon-box.negative {
              background-color: var(--mwx-danger-bg);
              color: var(--mwx-danger);
            }

            .icon-box.positive {
              background-color: var(--mwx-success-bg);
              color: var(--mwx-success);
            }

            /* RESPONSIVIDADE */
            @media (max-width: 768px) {
              .comparison-title {
                font-size: 1.75rem;
              }

              .comparison-card {
                padding: 28px 20px;
              }
            }